Дизайн интерфейсов: Как стать дизайнером интерфейсов. Еще одна статья с кучей ссылок на…

Содержание

Как стать дизайнером интерфейсов. Еще одна статья с кучей ссылок на… | by Matvey Pravosudov

Составьте план

Саша Бизиков был разработчиком, а потом за год стал младшим дизайнером интерфейсов в Фанбоксе. Он подошел к делу осознанно: нашел материалы, составил план изучения, сходил в школу Яндекса и выполнял тестовые. В своем блоге он рассказал, как составлял план и шел к цели: Цель, Инструмент и План.

Кстати, в блоге Саши много заметок о том, как он пробовал в себя в дизайне и какие ошибки совершал.

Выберите направление

Рядом с дизайном интерфейсов живут разные специализации.

Дизайн интерфейсов. Есть классические дизайнеры интерфейсов (UI/UX), которые занимаются и проектированием сценариев, и визуальным дизайном.
Продуктовый дизайн. Тот же дизайн интерфейсов, но больше ответственности, так как дизайнер отвечает за весь дизайн продукта и те чувства, которые продукт вызывает. В продуктовом дизайне по-другому формулируются задачи и вообще процесс работы.
UX-дизайн. Некоторые компании ищут узких спецов. «UX-проектировщики» — проектируют интерфейсы без оглядки на эстетику и трансляцию бренда
UI-дизайн. Те, кто по вайрфреймам первых готовит финальный дизайн.
Коммуникационный дизайн. Если у вас получается больше рисовать, чем проектировать — вам может быть ближе графический или коммуникационный дизайн. Продуктам часто требуются дизайнеры, которые будут заниматься брендом, иллюстрациями, презентациями, промосайтами и всей графикой.
Исследования. Посмотрите в сторону пользовательских исследований. Если в компаниях хорошо развит дизайн-процесс, часто они прибегают к помощи исследователей, которые готовят юзабилити-тестирования, проводят воркшопы, выявляют нужные фичи и находят боли пользователей. Посмотрите видео Натальи Стурза про команду UX-исследователей.

Соберите портфолио

Есть три способа оценить дизайнера при приеме на работу: портфолио, собеседование и тестовое задание. На собеседовании обычно спрашивают общие вопросы: «Какими инструментами пользуетесь?», «Как вы работаете над задачей от начала до конца?», «Как проверяете, что достигли успеха?», «Разработчики говорят, что запрограммировать интерфейс слишком дорого. Ваши действия?». Собеседование показывает, знает ли кандидат область и его ли это работы (хотя бы приблизительно).

Но быстрее всего уровень дизайнера демонстрирует его портфолио: несколько релевантных проектов, запакованных в виде «презентаций» или кейсов. Самое удобное портфолио — аккаунт на бихансе или личный сайт. У такого подхода главный плюс — удобство просмотра и передачи портфолио туда-сюда, потому что можно просто кинуть ссылку. Не нужно держать портфолио в архиве, на дропбоксе или флешке. С такими ресурсами неудобно работать и вам скорее всего откажут до просмотра работ.

Главная задача страницы проекта такая же, как у презентации интерфейса кому-нибудь: доказать, что вы справились с задачей. Вот что нужно показать на странице проекта:

Название продукта, сайта или приложения,
Задача,
Ваша роль,
Картинки с интерфейсом,
Небольшой пояснительный рассказ, что было сделано и почему,
Ссылка на результат (сайт, приложение или продукт).

А где взять первые проекты? Можно придумать задачи самому: перерисовать какой-то сайт, заредизайнить стремное приложение или закреативить новый продукт. Это сложно, но интересно.

А самый простой путь — найти понравившуюся вакансию с тестовым и сделать его. Там и задача будет более-менее реальная, и в любом случае компания даст какую-то обратную связь, которая подскажет вам, куда развиваться.

Придумали крутую идею, сделали пару тестовых, оформили это всё в виде сайта и можно в бой.

Устройтесь на стажировку

Если вы прочитаете всю теорию из этой статьи, все равно не получится сделать крутой интерфейс без практики (ваш К. О.). Именно на настоящей работе статьи впитываются, навыки оттачиваются и появляется ощущение контроля процесса.

Ваша цель — попасть на стажировку или устроиться младшим дизайнером интерфейсов. Обычно, от новичков ожидают понимания дизайн-процесса, навыков работы в графическом редакторе, знания соседних инструментов (инвижн, миро, зеплин и т. д.) и желание развиваться. К стажерам прикрепляют старших товарищей, которые выдают задачи и проводят дизайн-ревью макетов. А у этих ребят можно спросить, в какой цвет кнопку красить, зачем нужна кнопка и какие они бывают.

Компании относятся к стажерам как к будущим профессионалам. Сначала они инвестируют в вас силы и ресурсы, а вы вырастаете в контексте компании и уже умеете решать специфичные задачи, а взамен получаете опыт и проекты в портфолио.

Стажировки можно найти на сайтах с поиском работы (HH, SuperJob), на сайтах больших компаний (Яндекс, JetBrains), в сообществах дизайнеров (Криэйтив Раша). Тут все просто: гуглите везде «стажировка ui ux» и проверяете информацию на адекватность.

На стажировках часто просят сделать тестовое задание. Но вы уже с этим знакомы, поэтому тестовое задание — еще один проект в портфолио!

Как стать дизайнером интерфейсов – 10 шагов по старту с нуля

Дизайнер интерфейсов – это начальный уровень в траектории развития Дизайнера цифровых продуктов или Продуктового дизайнера (UX/UI). Такой спец работает в продуктовой компании, а не в агентстве. Он адепт одной компании в которой работает, фанат продуктов, для которых он создает интерфейсы и развивает дизайн-систему. В работе он применяет готовую дизайн-систему и собирает из нее интерфейсы под новые функции, которые (чаще всего) уже в каком-то виде заточили инженеры. А также вносит правки в существующую дизайн-систему, развивает ее. Помогает инженерам развивать инфраструктуру, проводит небольшие исследования, периодически изобретает новые элементы управления. Такая работа притягательна для тех, кто любит, как инженер, точить большие сооружения, долго и планомерно.

UI-дизайнер – это другой термин и другая профессия. UI-дизайнер чаще работает в международном диджитал-агентстве и на фрилансе. Он не фанат какого-то одного бренда, он фанат творчества в диджитал пространстве. Ему нравится делать новое на вкус, цвет, по ощущением, отгружать ценность по всем фронтам заметным способом, помогать прорабатывать видение и поднимать бренды в диджитал. Работать с множеством разнообразных клиентов поднимать новые уникальные продукты, которые выделятся из толпы. Из таких разнообразных трофеев он и собирает портфолио. К нему часто приходят, когда программировать еще даже не начали. В продуктовых компаниях таких ребят по пальцам пересчитать, в отличие от дизайнеров интерфейсов, которых много.

Есть еще термин UX-дизайнер, но в рунете чистых UX-дизайнеров не ищут, так как сложно однозначно описать их должностную инструкцию. В рунете вместо термина UX-дизайнер применяют такие термины как: CX/UX-исследователь, Аналитик данных, Дизайнер интерфейсов, UI-дизайнер, Продуктовый дизайнер (UX/UI) – все, что покрывает процесс дизайна-пользовательского опыта (процесс UX-дизайна). Чтобы работать UX-дизайнером в полном объеме требуются все эти навыки. Вы можете познакомиться с полным списком здесь.

Под профессией UI-дизайнер и Дизайнер интерфейсов стоит совершенно разный комплект навыков. Это значит, что если вы планируете работать именно по профессии Дизайнер интерфейсов, а не UI-дизайнер, то нужно нарабатывать другие компетенции. Поэтому рекомендую изучить статью максимально подробно, чтобы цель совпала с ожиданиями.

Содержание:

Сила и ценность дизайна интерфейсов для бизнеса

Кто такой дизайнер интерфейсов и чем на самом деле он занимается

С чего начать изучение дизайна интерфейсов – первые 10 шагов в дизайне интерфейсов

Изучите устройство дизайн-систем международных брендов
Возьмитесь за первый проект по дизайну интерфейсов и сделайте его вместе с наставником
Зарегистрируйте в международных сервисах и найдите в них элементы дизайн-системы

Отрисуйте ключевой сценарий во всех деталях и прочувствуйте дизайн-систему в работе
Проработайте анимации во всех нюансах и добейтесь того же качества исполнения, что и оригинал
Изучите ТОП-3 книги по дизайну интерфейсов (международный ТОП)
Прокачайтесь в инструментах прототипирования и анимации, чтобы стать смелее в реализации идей
Вступите в самые популярные дизайнерские сообщества и задайте самый волнующий вопрос
Пройдите практику по дизайну интерфейсов на боевом продукте
Опубликуйте портфолио

Что дальше изучать по дизайну интерфейсов

Где начать работать, чтобы раскрыться на полную

Вывод и рекомендация

Сила и ценность дизайна интерфейсов для бизнеса

В чем ценность дизайна интерфейсов для бизнеса

Хороший пользовательский интерфейс учитывает человеческие слабости, перекладывает работу на машину, минимизирует ошибки и раздражение пользователя.

Дизайн интерфейсов – это про представление информации с учетом ее природы, особенностей цифрового носителя, принципов восприятия и решаемой задачи. Дизайн интерфейсов также призван сэкономить время инженеров, так как еще на фазе прототип понятно, как все должно работать. Это значит, что новая функция раньше окажется на живом у клиентов и сделает платформу, экосистему, инфраструктуру крепче и сильнее конкурентов.

Чем полезен дизайнер интерфейсов

Дизайнер интерфейсов создает элементы управления, через которые мы можем получить доступ к полезностями и ценностям приложения. Именно под интерфейсом находится программный движок и вертятся данные понятные только машинам.

Если вглядеться в современные приложения, такие как карты Google, будильник iPhone, модуль бронирования на сайте отеля или калькулятор кредитов на сайте зеленого банка, можно заметить универсальные принципы дизайна интерфейсов, которые не зависят от стандартов операционной системы, среды или устройства. Тот, кто знает эти законы, может улучшить существующую систему или создать с нуля свою собственную.

Поглядите девайс, он много чего умеет, но без интерфейса доступа к этому не получить. В данном случае дизайнер помог создать функциональную оболочку вокруг контента. По стилю она близка к стандартному UI-киту платформы, на которой работает и стилизована по гайдлайнам бренда. Это пример приложения Craft. Кстати, такую штуку можно запрототипировать в InVision Studio.

Когда мы говорим о дизайне интерфейсов – речь частенько идет о дизайне в стиле минимализм, с минимальным характером, такой дизайн как правило у крупных продуктовы компаний на рынке, они стараются как можно быстрее заполнить пространство рынка новыми функциями-фичами и предполагается, что все эти функции нужны и ценны. В книге “Загмайстер и Уолш: О Красоте”, автор сравнивает такой дизайн с панельками повышенного комфорта.

Как бы мы не ругали «хрущевки», но для людей из коммуналок и бараков в 1960-е они были чуть ли не дворцами. Фото: ТАСС

Загмайстер и Уолш, конечно, хотели бы видеть больше чувств у брендов в интерфейсах и приводят слайды зданий в пример. Но тут важно понимать, что картинки слева строились дольше в большом количестве, поэтому и пришлось для обеспечения множества людей жильем и выполнения политических планов делать так, как на картинках справа. Такие дела.

В этом и есть, кстати, соль отличия от работы в агентстве и гигантской продуктовой компании. Все продуктовые компании делают как справа, а в агентства всегда приходят за уникальными проектами, как слева, чтобы выделиться, запомниться, откликнуться в сердцах своей аудитории и разжечь желание повторить опыт взаимодействия.

Китай с особенной культурой (слева) и Китай как весь мир вокруг (справа).

В статье про боевые практики минималистичного дизайна приложений в действии: Instagram, Airbnb, Apple Music вы можете поглядеть, вот такую картинку про уникальность и выразительность. Тот самый Content-First работает во всей красе. Все как писали ребята Загмайстер и Уолш: “О Красоте”.

По-сути тут уже и видно, что профессия Дизайнер интерфейсов – одна из стартовых точек, а расти ему дальше можно в UI-дизайнера и развиваться в бренд-дизайне или в Продуктового дизайнера (UX/UI) и развиваться в исследования и аналитику.

Остался один черно-белый интерфейс — контент стал заметнее, а функциональность — понятнее.

Дизайнер интерфейсов – игрок в продуктовой команде, а в ней много инженеров и они все время что-то точат, кодят. Ресурсов на продуманный интерфейс для пользователя у них не хватает, в итоге использовать продукт без инструкции не удобно. Дизайнер интерфейсов помогает это исправить и сделать продукт удобный для людей.

Кстати, откуда вообще взялась норма с инструкциями у инженеров? На мой взгляд все просто. Программисты сами часами с удовольствием лазят по всяким библиотекам, разделам документаций различных API, вот им и кажется, что лазить по документациям – это очень кайфово. В обычном мире люди такого не ждут. Если перед нами дверь, то тяни или толкай, если ложка, то хватай-черпай и в рот клади. А не инструкции всякие, а конструкции то тоже инженерные. Только сделаны они с учетом реального мира, вместе с дизайнерами. Вот и в интерфейсах также надо делать: бери и пользуйся. Без инструкций.

Задача дизайнера интерфейсов в продуктовой компании – снижать нагрузку на сознание пользователя и ускорять достижение значимых целей. Визуального творчества здесь поменьше, чем в агентстве, зато есть горы творчества на конструкторском уровне и исследования с целью разобраться в задаче.

За выразительность интерфейса в продуктовой компании отвечает бренд-менеджер с бренд-дизайнером в паре (потому что бренд должен быть продуман во всех точках контакта), дизайн-система уже тоже построена и продумана и вертится на обширной продуктовой линейке, поэтому в первую очередь требуется решать входящий поток новых задач с помощью готовой обширной дизайн-системы, а также проводить небольшие исследования. Серьезные исследования проводят команды аналитиков данных, cx-исследователей, продакт-менеджеры и маркетологи. В общем большая команда рядом. Для тех, кому нравится глубина проработки и фанатичность – это сюда.

Нюанс: Отличие Дизайна интерфейсов от UI-дизайна. Дизайн интерфейсов ≠ UI-дизайн

В рунете термины встречаются в разных контекстах, а между тем, эти термины принципиально разные.

Дизайнер интерфейсов – работает в компании с большим количеством сервисов (продуктовая экосистема): Apple, Google, Uber. Я привела компании-первопроходцы с самыми известными на весь мир дизайн-системами. Другие компании пока последователи, их разберем позднее. Работа с интерфейсами подходит ребятам с инженерным складом ума. Это ребята-инфраструктура и план, на таких держится сельское хозяйство, заводы, оборонка, строительство. Например, с культурой работы в дизайн-системе Uber вы можете познакомиться здесь.

Style Guide Uber, позволяет дизайнерам тестировать разные конфигурации компонентов.

Продуктовый дизайнер (UX/UI) – работает в активно растущих игроках, которые фанатично развивают один продукт и экосистему вокруг него, например Stripe, Spotify, Intercom, Mailchimp, Telegram. В отличие от дизайнера интерфейсов он больше исследует, предлагает концепции, работает над воплощением, затем вместе с аналитиками корректирует курс. Продуктовый дизайнер выдает больше смелых решений проблем в жизни клиентов, а не просто работает над интерфейсом по готовому ТЗ. Он исследует настоящую жизнь клиентов и находит способы как сделать ее лучше.

UI-дизайнер – работает в диджитал агенствах (в том числе полного цикла) с разработчиками, дизайнерами, исследователями в штате или на фрилансе. Например Outcrowd, Focuslab, Ueno. Идеальная работа для творческих ребят, увлекающихся экспериментами, конструированием и рисунком. С такими можно внезапно подорваться в приключения и прийти с внезапными трофеями. Ребята жаждут открытий и новых ощущений. Их зажигает создание концептов, прототипов будущих продуктов. Именно такие ребята сподвигают общество к переменам, осмыслению и пересмотру взглядов. К ним приходят за свежим уникальным решением.

Кто такой дизайнер интерфейсов и чем на самом деле он занимается

Дизайнер интерфейсов изучает сценарии поведения пользователей, чтобы создать понятный и полезный интерфейс. Он проектирует то, как пользователь будет взаимодействовать с продуктом.

Дизайнер интерфейсов — это спец, который помогает команде разработчиков делать интерфейс удобнее для пользователей. Чтобы определить, что такое «удобнее» для самих себя, коллег-разработчиков и пользователей, они используют принципы проектирования. «Удобно» можно сформулировать так: большинство пользователей решает задачу максимально быстро.

«Удобно» – слишком абстрактная формулировка, и её сложно применять на практике. Поэтому проще использовать конкретные принципы, которые можно измерить и которые в сумме обеспечивают то же самое. Эти принципы:

Скорость доступа к элементам интерфейса;
Экономия внимания;
Информативность;
Находимость;
Привычки;
Сложность разработки;

В списке нет таких понятий как «соответствие целям и сценариям пользователя», «теория близости» или «скорость работы приложения» — всё это должно работать по умолчанию.

Подробнее про каждый принцип проектирования интерфейсов можно изучить в статье от команды дизайнеров IntelliJ IDEA.

Какие задачи решает дизайнер интерфейсов и чем зажигает эта профессия

Дизайнер интерфейсов помогает создать новый продукт или реализовать новый сценарий и поддерживает развитие уже раскрученных приложений (прорабатывает новые сценарии). А еще он может залезть в аналитику и найти точки для улучшения полезного сценария в продукте и предложить прототип.

Профессия дизайнер-интерфейсов хороша для старта. Это идеальная работа для перфекционистов тем, что здесь можно всю жизнь посвятить полировке функциональных элементов (кнопок, меню, ссылок) и микроанимаций, совершенствованию интерфейса продукта и опыта взаимодействия. Но с точки зрения творческой составляющей, для ребят, которые хотят быть заметными, творить разнообразные выразительные системы, делать новые выделяющиеся на международном рынке решения, жечь креативом и наглядными результатами, здесь конечно пространство для роста резко ограничено.

Основные этапы работы в дизайне интерфейса

ТЗ дизайнеру интерфейсов, как правило, приходит невероятно проработанное. А дизайн-система уже собрана, да и бренд-дизайн весь тоже готов и отлажен по коммерческим показателям. Фактически остается совсем немного работы, чтобы довести все до результата. Вся неопределенность в проекте уже снята, остается вписаться с интерфейсом в потребности.

Первый шаг — это всегда понять задачу. Если в продуктовой компании четко поставлена работа по продакт-менеджменту, то продакт-менеджер уже расчертил вектор развития продукта, вместе с аналитиками маркетологами разобрал сильные и слабые стороны игроков, пощупал их руками, покатался на них и четко знает, какой интерфейс нужен, а какой нет.

От дизайнера на этом этапе требуется вникнуть в бизнес-цели, изучить собранный контекст исследований и не потерять детали.

Следующий шаг — концептуальное прототипирование. Дизайнер использует стандартные инструменты, к примеру Figma или InVision Studio. В нее можно закинуть эскизы, накинуть сверху готовых компонентов, настроить микроанимации и уже получиться продукт как живой. Дальше это все дело можно отправить всем участникам команды и собрать обратную связь.

Чтобы набросать концепцию или протестировать идею лучше выбрать InVision Studio, в нем можно быстро собрать концепт со всеми эффектами и микроанимациями: дать команде возможность прочувствовать экспериенс на своем устройстве.

Проектирование экранов и состояний

Когда концепт утвержден, в Figma прорабатываем все экраны и состояния до предела со всеми нюансами навигации, используем компоненты существующей дизайн системы и дополняем новыми компонентами которых не хватает.

Если продукт новый и создается внутри существующего бренда, то продакт-менеджер, как правило, заинтересован в быстром старте, поэтому все будет выглядеть максимально стандартно, но комфортно на ощупь. Без особых изысков, с креативной графикой бренда от арт-директора. Новичку такие задачи обычно в кайф, особенно когда есть микроанимация, и прочая вкуснота.

Прототип нужно подготовить к разработке. Это самая простая работа, потому что InVision Studio сделает все автоматически. InVision Studio + InVision Inspect и разработчики счастливы. Единственное, что вам как дизайнеру нужно делать – это поддерживать дизайн-систему в актуальном состоянии (новые компоненты, их состояния, примеры работы в контексте), называть новые дизайн-объекты осмысленно и применять принципы по организации дизайн-проекта. Но это все нарабатывается и развивается по мере работы буквально парой советов и маленьким документом правилами.

Следующий шаг — тестирование. В продуктовых командах развита культуру тестирования на пользователях. А InVision Studio хороша тем, что она помогает тестировать прототипы уже в поле и собирать обратную связь. В связке с InVision Inspect она помоагет передать все это дело в разработку просто реактивными темпами, ну а дальше разработчики с аналитиками выполнят всю ключевую работу по запуску и постановке задачи на корректировку.

Особенности работы в компании, агентстве и на фрилансе

Дизайнер интерфейсов – это чаще новичок в продуктовой компании. На фрилансе в одиночку ему может не хватить сил сделать смелый по выразительности проект.

А среди агентств нужно искать агентства с разработчиками в штате и несколькими крупными постоянными клиентами. Такие агентства еще называют агентства полного цикла и диджитал-интеграторы. В таких компаниях для дизайнера-интерфейсов может найтись работа схожая с работой в продуктовой компании. Так как такая компания оказывает услуги сервис-дизайна крупным игрокам, у которых свой штат диджитал-спецов не справляется или пока вовсе отсутствует (такие компании, к примеру, только шагнули в эпоху диджитализации). Другие агентства берут UI-дизайнеров с прокачанными художественными навыками, готовых к творческим смелым экспериментам над дизайн-концепциями.

С кем в команде работает дизайнер интерфейсов

Чтобы создать интерфейс, который будет комплексно решать задачи пользователя, дизайнеру нужно добыть данные от других спецов. Он работает с менеджером проекта, стратегами, аналитиками данных, cx-пользователями и разработчиками.

Например, команда развивает приложение для приема заказов такси. Стратеги изучили обстановку на рынке и выяснили, что таксисты нашли способ применения чата в Telegram или WhatsApp, чтобы совместно влиять на спрос и цену. Теперь продакты могут собрать механику развития продукта, передать эти данные дизайнеру и он сможет учесть этот нюанс в интерфейсе продукта.

Обязанности дизайнера интерфейсов

Дизайнер интерфейсов вникает в результаты исследований, механику бизнес-модели, анализирует сценарии поведения, протопирует варианты, чтобы разработать понятный и полезный интерфейс. Он прорабатывает детали того, как пользователь будет взаимодействовать с продуктом. В основные обязанности дизайнера интерфейсов обычно входит:

Погружение в задачу и анализ ТЗ
Применение дизайн-системы компании для сборки интерфейса
Создание прототипов решения задачи
Подготовка к разработке
Сопровождение проекта на фазе реализации
Анализ результатов вместе с разработчиками

Какими знаниями, личными качествами и навыками обладает дизайнер интерфейсов

Здесь чек-лист концепций, которые ежедневно помогают мне в работе над UI-дизайном. По каждому пункту в Google есть много информации на русском. Рекомендую использовать именно Google, потому что ребята стараются помогать с поиском, на первом листе выдачи уже будет много ценного.

Личные качества

Системное мышление
Инструментальная гибкость
Аккуратность, тщательность и внимание к деталям
Социальный интеллект
Развитые коммуникативные навыки
Аналитическое и развитие логическое мышление
Критическое мышление и сбор обратной связи от коллег и заказчиков
Командная работа над проектом и делегирование

Знания

Продукт нанимают чтобы сделать работу: основы JTBD;
Продукт через интерфейс вступает в диалог с пользователем чтобы помочь достичь цели;
Ментальные модели и бизнес-процессы;
Интерфейс работает уже в черно-белом, а стили нужны, чтобы вызвать эмоции;
Сначала мобильные. Примените силу content-first;
Визуальный дизайн интерфейса – отражение характера, культуры и ценностей бренда;
Понимании стратегии развития помогает быстрее принимать решения на уровне интерфейса;
Больше знаешь о предметной области – смелее работаешь над интерфейсом и предлагаешь перспективные идеи;
Интерактив и анимация помогают измеримо улучшить UX
Эксперимент – основа прогресса;
Атомарный дизайн. Паттерны проектирования и дизайн-системы помогают попадать в ожидания на любой платформе и ускорить разработку;
Продукт отгружает ценность и ее можно измерить с помощью метрик;

Навыки

Проектирование интерфейсов и UX-дизайн. Это работа схожа с архитектурной. Если сравнивать со строительством дома, то архитектор сделает всю работу и остановится на дизайне интерьера. Дизайнер интерьера возьмет на себя UI-дизайнер. Вот и в интерфейсах также. UX – это когда черно-белыми макетами уже можно пользоваться и задача решается.
Психология восприятия. В первую очередь речь об инструментах организации пространства и влияния на восприятие: модуль, типографика, цвет, композиция, образы, знаки, сторителлинг в диджитал;
Аналитика данных. Здесь вам нужно понимать, что любая систем втягивает потоки клиентов и дальше по магистралям везет их к цели. Аналитика помогает разобраться в том, кого и куда лучше везти, почему и как сделать систему ценнее.
Управление проектами. Этот навык в первую очередь связан с балансом и оркестровкой. Баланс – про соответствие бизнес-целей и целей пользователей в политическом контексте. А оркестровка – это про слаженную работу команды, а не лебедь рак и щука.
Бренд-дизайн. В своей работе дизайнер интерфейсов часто работает с готовой графикой бренда. Когда лучше понимаешь итоговую цель, то смелее действуешь. Поэтому рекомендую бренд-дизайн тоже охватить.

Какие инструменты использует в работе дизайнер интерфейсов

Для погружения в задачу. Результаты опросов, интервью, Customer Journey map (CJM), BPMN-диаграммы, отчеты от аналитиков из систем аналитики (Google Firebase, Amplitude, OWOX BI, Google Analitycs 360)

Для дизайн-мышления. Пробковая доска, листы A4, принтер, блокнот, стикеры разных цветов, карандаши, маркеры. Все это пригодится для понимания задачи, создания первых схем, концептов, подбора компоновок.

Дизайн интерфейса. Если вы находитесь в смелой продуктовой компании, то Figma вам не хватит, потому что с ней вы всегда думаете “а смогу ли я это реализовать, поддерживает ли Figma”. А вот с InVision Studio вы можете реализовать любую задумку и проверить идею без ограничений в поведении. Поэтому Figma часто дополняют связкой: Figma + Principle, Figma + ProtoPie.

Для интерактивных прототипов. Для создания интерактивных прототипов годятся InVision Studio, Principle.

Я считаю, что инструментов много не бывает. Они же как краски, помогают прокачать ваш дизайн-процесс и сделать результат насыщеннее или быстрее, как требует задача. В этой статье я разобрала свежий комплект инструментов для дизайна, которые помогут сделать блестяще все: от вайрфреймов до интерактивных дизайн-систем.

С чего начать изучение дизайна интерфейсов – первые 10 шагов в дизайне интерфейсов

1. Изучите устройство дизайн-систем международных брендов

Загляните в интерфейсы Airbnb, Mailchimp, Google Material Design, Apple Human Design Guidelines. Черпаните культуру ТОП-экосистем. Пощупайте на разных устройствах. Изучите досконально предысторию, принципы на которых держится дизайн-система. Почувствуйте культуру и особенный подход. Гуглите по запросам ‘uber design system’, ‘airbnb design system’ и т.д.

2. Возьмитесь за первый проект по дизайну интерфейсов и сделайте его вместе с наставником

Подыщите курс с легким стартом и ассортиментом интересных и жизненных проектов. К примеру курсы UX/UI на Breezzly. Задизайните веб-сервис, приложение для смарт-часов или мобильное приложения для бронирования кафе, а затем уже погружайтесь дальше через очные курсы с командной работой (поможет сильнее прочувствовать весь дух профессии).

3. Зарегистрируйте в международных сервисах и найдите в них элементы дизайн-системы

Для этой задачи отлично подходят Airbnb (b2c) и Mailchimp (b2b).

К примеру, зарегистрируйтесь в Airbnb, забронируйте местечко и съездите в путешествие, вернитесь и оставьте отзыв. Почувствуйте роль интерфейса во всем процессе и в вашей жизни и в вашем путешествии. Поразмышляйте, что вы бы улучшили?

Затем, зарегистрируйтесь в Mailchimp. Соберите единомышленников список и отправляйте им в течение пары недель интересные и полезные письма. Изучите историю развития бренда Mailchimp, как вы думаете, как ему удалось завоевать весь мир?

4. Отрисуйте ключевой сценарий во всех деталях и прочувствуйте дизайн-систему в работе

Определитесь для какого устройства/размера экрана вы собираете прототип. Расчехлите Figma или InVision Studio.

Возьмите готовую дизайн систему, например material design или ios ui kit и используя готовые компоненты соберите первую версию экранов для всего сценария.

Доработайте компоненты которых не хватает и наполните экраны живым контентом. Не используйте генераторы текста

Сравнивайте экраны со скетчами, до/после.

5. Проработайте анимации во всех нюансах и добейтесь того же качества исполнения, что и оригинал

Начните с повтора готовых анимаций, найдите ту, которая вас зажигает. Действуйте так: снимите анимацию на видео и покадрово изучите ее тайминги. Затем возьмите Figma + Principle или InVision Studio и повторите ее вовсех нюансах. Почувтсвуйте движение и текучесть интерфейса.

6. Изучите ТОП-3 книги по дизайну интерфейсов (международный ТОП)

Сейчас я рекомендую всем следующую подборку книг для старта:

User Friendly, Cliff Kuang;
Refactoring UI, Adam Wathan & Steve Schoger;
100 главных принципов дизайна. Как удержать внимание;
Веб-дизайн. Книга Дж. Гарретта. Элементы опыта взаимодействия;
Загмайстер и Уолш: О Красоте;

Эти книги хороши живой подачей, обилием иллюстраций, алгоритмами, схемами, кейсами и проверенными боем на международном рынке советами.

7. Прокачайтесь в инструментах прототипирования и анимации, чтобы стать смелее в реализации идей

Не стоит бояться новых инструментов и программ, подойдите к их изучению с исследовательской точкой зрения. Чаще всего у каждого инструмента есть свои сильные стороны и какие то задачи в них делаются быстрее. Полную подборку инструментов берите здесь.

Я в своей работе применяю: Figma, Principle, InVision Studio, After Effects, Photoshop, ProCreate. Зависит от задачи. По-сути я стараюсь расширять свой творческий арсенал, а не ищу один лучший инструмент.

8. Вступите в самые популярные дизайнерские сообщества и задайте самый волнующий вопрос

Есть три самых насыщенных информацией сообщества в рунете на тему продуктового дизайна. И задайте самый волнующий вопрос. Вступайте же:

9. Пройдите практику по дизайну интерфейсов на боевом продукте

Вот вам чек-лист для самостоятельно практики в дизайне интерфейсов. Боевой продукт – место вашей стажировки или продукт, которым вы пользуетесь ежедневно и поэтому знаете, когда он отрабатывает не идеально.

Превратите скетч в интерактивный прототип полезного сценария для своего телефона используя дизайн систему, например Material Design для Android;
Закрепите навыки работы с дизайн-системой. Повторите на альтернативной дизайн-системе. Все те же шаги, что и в первом пункте;
Учимся видеть дизайн-системы вокруг. Возьмите живой продукт и снимите с него дизайн-систему;
Свобода владения дизайн-системой. Соберите ключевой сценарий одного из продуктов на любой известной дизайн системе и доработайте компоненты которых не хватило Яндекс и Убер
Добавьте новую функцию и доработайте дизайн-систему. Возьмите существующее приложение и готовую дизайн систему и добавьте дополнительную функцию. Добавьте функциональность Spotify в facebook.
Соберите концепцию приложения которым вы сами пользуетесь. Продумайте концепцию и продумайте какую особую культуру будет продвигать новый вид этого приложения. Постарайтесь изучите аудиторию приложения и в каких ситуациях оно полезно, подумайте как визуально усилить его сильные стороны;
Добавьте программу лояльности в админку интернет магазина. Подыщите интернет-магазин в котором нет личного кабинета и программы лояльности и предложите концепцию того, все все могло бы работать в деталях;
Упакуйте интернет-магазин в мобильное приложение. На дизайн системе андроид + стили озон и соберите мобильное приложение для озон в стилях андроид с каталогом и программой лояльности для андроид. А затем сравните с существующим приложением ;
Возьмите тестовое задание в компании. И попробуйте свой новый комплект навыков боем;

Для выполнений упражнений подойдет Figma и InVision Studio.

10. Опубликуйте портфолио

В портфолио больше внимания уделяйте аналитической составляющей. Если подаете дизайн-систему, то расскажите о том, почему она такая и чем хороша, поделитесь культурой работы с ней и пользой для применения на практике. Если собираете новую функцию с нуля, то расскажите об аудитории, которой ценна эта функция, продемонстрируйте схемы взаимодействия: User Flow, Wireframes, Flowcharts и интерактивный прототип. В вашей работе должен чувствоваться аналитический подход к погружению в задачу, декомпозиция

Примеры оформления портфолио: Изучите кейсы компании MetaLab. Ребята с 2006 года помогают известным международным диджитал брендам создавать интерфейсы для продуктов.

Вы также можете делиться своими работами или кусочками процесса прямо в dribbble: https://dribbble.com/NewWingsAsya.

Очень важно. В портфолио фокусируйтесь на презентации элементов культуры работы, навыков, умений и подхода, тогда и подача придет в интересном визуале.

Что дальше изучать по дизайну интерфейсов

Развивайте творческие навыки, тренируйтесь в эстетике и погрузитесь в культуру развития продукта на основе данных.

Controforma. Брендинг. Смелость, основанная на понимании. Курс от брендингово агенства Шишки. Курс создан для людей, которые хотят более свободно чувствовать себя в мире брендинга. Здесь уделяют немалое внимание всем этапам создания фирменного стиля — от стратегии до визуала.
Пройдите курс по работе с клиентом. Есть классный курс у Ильяхова: Курс о работе с клиентом для редактора. Для дизайнеров интерфейсов он тоже годится.
Освойте iPad для создания концептов и иллюстраций. Мне освоить иллюстрацию на iPad помогала Настя Никсен.
Пройдите курс по UX-исследованиям – поможет смелее погружаться в предметную область и изучать клиентов.
Пройдите курсы от Go Practice: Курс управления продуктом на основе аналитики – научит применять данные для создания наилучшего дизайн-решения.

Где начать работать, чтобы раскрыться на полную

Начните с продуктовой компании, если у вас мало практики в иллюстрации и веб-дизайне. Со временем прокачаетесь по UX. Художникам в душе, я рекомендую агентство. И вот почему. В агентстве вы быстрее соберете разноплановое портфолио. И это очень важный момент, когда вы только начинаете и хотите ощутимо расти. Начните собирать портфолио как можно раньше. Если по итогу года работы вам вам все еще нечего показать, то почитайте книгу «Покажи свою работу! 10 способов сделать так, чтобы тебя заметили». Портфолио и навыки – ваше все. И это все должно быть видно!

Вывод и рекомендация

Направление дизайна интерфейсов годится для старта, как только освоитесь в нем, то сразу продолжайте расти в UI-дизайнера, UX-дизайнера и Продуктового дизайнера.

Если вас интересует системный и быстрый старт в дизайне интерфейсов, то вы можете пройти сначала практику в проектах на курсах Breezzly, затем изучить копирайтинг и основы работы с клиентом у Ильяхова, основы типографики, бренд-дизайна в Contoforoma, а затем уже подбирать следующую серию курсов.

Крэш-курс по UI-дизайну / Блог компании Я люблю ИП / Хабр

Мы всегда в поисках хороших статей о дизайне, чтобы потом использовать их в работе над сайтом «Я люблю ИП». Сегодня мы перевели ещё одну статью, которая рассказывает, чем отличается UI-дизайн от UX-дизайна и на каких основных принципах строится дизайн интерфейсов.

UI vs. UX

Если вы хоть немного интересовались дизайном приложений, то наверняка слышали термины «UI» и «UX». Но чем же они отличаются?

В самой простой форме, UX-дизайн — это то, что делает интерфейс полезным, а UI-дизайн — делает его красивым. Дизайн интерфейсов — это смесь визуальной иерархии и элементов интерфейса. Чтобы разобраться, чем отличается прекрасный дизайн от просто хорошего, необходимо понять, что дизайн интерфейсов — это всего лишь один из слоев целого дизайн-процесса. Возможно, именно поэтому эти два термина так часто путают. В этой статье я постараюсь рассказать, в чём же заключается разница между ними с точки зрения дизайн-процесса.

Согласно книги Дж. Гарретта «Элементы опыта взаимодействия», UX-дизайн можно определить через пять основных уровней. Давайте начнём с самого абстрактного.

1. Стратегия

Цели сайта и потребности пользователей

В широком смысле, стратегия — это основа продуктового дизайна. На данном этапе применяются различные техники исследования, включая пользовательские интервью, анализ конкурентов, персонажи и др., для того, чтобы понять:

Какую проблему вы пытаетесь решить?
Что нужно пользователям?
Как ваш продукт вписывается в контекст вашего бизнеса (каковы его цели)?

2. Набор возможностей

Функциональные спецификации и требования к контенту

На данном этапе вы должны определить набор функций и объём информации для вашей платформы. Другими словами:

Как вы будете решать данную проблему? Какие функции вы хотите реализовать и в каком порядке?

Главный вызов для дизайнера здесь — это правильно расставить приоритеты с минимальными издержками. Наверняка, у вас есть сотни идей, как решить проблему, но вы не можете внедрить их все.

3. Структура

Информационная архитектура и проектирование взаимодействия

На данном этапе ваши идеи должны начать оформляться в структуру. Информационная архитектура отвечает за то, как представлена информация внутри приложения и как её воспринимают пользователи. Проектирование взаимодействия определяет последовательность действий, которые помогут пользователю решить конкретную задачу. Вместе они определяют наиболее логичные шаги для того, чтобы удовлетворить потребности пользователей.

4. Компоновка

Дизайн интерфейса и информационный дизайн

На данном этапе вещи становятся все менее абстрактными и более конкретными.

На уровне компоновки мы разрабатываем дизайн интерфейса и информационный дизайн, чтобы уточнить структуру из предыдущего уровня. Дизайн интерфейса отвечает за расположение конкретных элементов интерфейса, которые позволяют пользователю взаимодействовать с функциональностью системы. Тогда как информационный дизайн отвечает за то, как представлена эта информация, чтобы облегчить это взаимодействие.

Именно на данном этапе вы найдёте большинство UX-дизайнеров или дизайнеров по продукту, работающих над вайерфреймами. Вайерфреймы — это очень приблизительные, зачастую чёрно-белые макеты, которые демонстрируют назначение каждого элемента интерфейса для пользователей.

И наконец:

5. Поверхность

Визуальный дизайн и чувственное восприятие

Уровень поверхности, как и предполагает название, стремится создать великолепное чувственное восприятие и визуальный дизайн. Задача дизайнера здесь — создать интуитивную связь с пользователями через успешную коммуникацию бренда, продукта, его ценностей и свойств в целостной картине.

Именно здесь вы найдёте UI-дизайнеров, делающих большую часть своей работы, используя такие инструменты как Sketch, Photoshop, Adobe Experience Design, Illustrator или Figma.

Теперь давайте перейдём к основным принципам хорошего UI-дизайна.

Принцип № 1. Простота превыше всего

Нет ничего хуже, чем неопределённость в приложении. Что делает эта кнопка? Как я сюда попал? Как вернуться обратно? Для того, чтобы это избежать, дизайнер всегда должен спрашивать себя:

Почему это здесь? Какой в этом смысл? Как ещё это можно сделать?

Хорошие дизайнеры находят множество возможностей для создания макета интерфейса, видит потенциальные недостатки каждого из них и понимают, какой дизайн лучше всего поможет пользователям достичь своих целей. Простота в дизайне позволяет пользователям чувствовать себя уверенно, находясь внутри приложения.

Принцип № 2. Давайте ясную, информативную обратную связь

Мы все пользовались такими сайтами и приложениями, где ты пытаешься нажать на кнопку и не понимаешь, сработала она или нет.

Простыми словами, у каждого действия должна быть реакция. Например, если вы веб-разработчик, то знаете, что :hover на кнопке позволяет пользователям понять изменение её состояния.

Отличный пример — это индикатор загрузки постов в ленте Facebook. Пока идёт загрузка контента, индикатор загрузки (в форме контента) информирует пользователей о том, что контент загружается.

Принцип № 3. Постоянство имеет значение

Когда я говорю о постоянстве, я имею в виду постоянство в расположении элементов интерфейса или языка, который используется в приложении. После того, как ваши пользователи научились пользоваться интерфейсом, не нужно заставлять их переучиваться. Давайте посмотрим на пример плохого постоянства.

Может показаться, что это три разных сайта от трёх разных компаний, но это не так. Почему так произошло? Потому что в меню на этих страницах используется разная цветовая гамма, разные шрифты и разное расположение. Это может дезориентировать пользователя и сбить его с толку, так как совсем неочевидно, что эти страницы принадлежат одному сайту.

Как вы можете поддерживать постоянство, будучи дизайнером? Вы можете создавать дизайн, использую постоянную сетку, например, сетку из 8 пунктов, которая часто используется в дизайне иконок и мобильный приложений. Также вы можете использовать постоянную цветовую гамму и элементы навигации на всех экранах. Все эти элементы можно включить в руководство по стилю.

Вывод: постоянство и хорошая структура позволят вашим пользователям чувствовать себя как дома.

Принцип № 4. Если сомневаетесь, используйте известные дизайн-паттерны

Не поймите меня неправильно — инновации это хорошо и всячески приветствуются, но только не в ущерб опыту взаимодействия пользователей. Не нужно изобретать новый велосипед там, где старый отлично справляется со своей задачей. Например, если вы не уверены, что иконка точно и интуитивно отражает значение слова, то лучше использовать просто слово. Или придерживаться обычной цветовой гаммы, где оттенки красного используются для предупреждения об опасности, а зелёный свидетельствует об успешном завершении.

Почему нужно использовать известные дизайн-паттерны? Дело в том, что многие из них основываются на человеческом восприятии. Возьмём к примеру F-паттерн для сканирования информации.

Это тепловая карта, сгенерированная в ходе эксперимента по слежению за движением глаз. Наиболее просматриваемые секции отмечены красным, наименее — синим. Как вы уже заметили, тепловая карта чем-то напоминает букву F. Но что это значит для дизайнера?

Это значит, что самый важный контент нужно располагать в левом верхнем углу.

Обычно там находится логотип. Это позволяет компаниям усилить их бренд. В правом верхнем углу может располагаться навигация или поиск. Это позволяет пользователям легко перемещаться по страницам, без необходимости искать навигационные элементы где-то в другом месте. Вот два примера, которые придерживаются этого принципа.

Чем ниже вы спускаетесь по странице, тем слабее становится внимание пользователей. Поэтому старайтесь располагать самую важную информацию ближе к верху и выделяйте заголовки, чтобы контент можно было легко сканировать.

Принцип № 5. Используйте визуальную иерархию

Что такое визуальная иерархия? Это такой порядок элементов, который подразумевает их относительную важность. Это попытка дизайнера повлиять на то, в каком порядке воспринимается представленная информация.

То, как мы воспринимаем информацию, зависит от нескольких факторов. Давайте посмотрим на основы визуальной иерархии.

1) Типографика

Из чего состоит хорошая типографика? Два основных фактора — это чёткость и удобство чтения.

Чёткость — это свойства, присущие конкретному шрифту, которые позволяют его символам отличаться друг от друга. Это полностью зависит от шрифта и здесь мало, что можно сделать. Поэтому выбирайте подходящий шрифт.

Удобство чтения — это то, как вы манипулируете отдельным шрифтом, чтобы его было легче воспринимать.

Заметили, как шрифт вверху воспринимается хуже, чем внизу? Если нет, то…

Ещё один фактор, который влияет на удобство чтения, — это длина строки. Если строка слишком короткая, то пользователь будет постоянно перепрыгивать со строки на строку, что сделает восприятие информации сложнее. То же самое верно, если строка слишком длинная — так глаза быстрее устают.

Также никогда не центрируйте большие блоки текста. Гораздо легче воспринимается текст с выравниванием по левому краю, потому что глаз точно знает, где начинается следующая строка.

2) Белое (или негативное) пространство

У вас когда-нибудь было такое, что вы смотрите на меню/ сайт/ интерфейс и думаете: «Мне нравится, как это выглядит, но я не знаю почему»? Теперь вы знаете. Всё дело в белом пространстве. Белое пространство чрезвычайно помогает в восприятии. Исследование 2004 года показало, что подходящее использование белого пространства между абзацами и для полей справа и слева улучшает восприятие почти на 20 %. Пользователям легче сфокусироваться и переработать такой контент.

Собака или кошка?

Многие считают, что белое пространство — это дело вкуса. Я думаю, это гораздо более объективно. Мы можем умело использовать белое пространство для того, чтобы усилить визуальную иерархию. Давайте посмотрим на сайт Helen Tran.

Прекрасное портфолио! Теперь посмотрим ещё раз более внимательно.

Вы заметили, как контент разбит на четыре чётких блока? Давайте пойдём ещё дальше.

Helen использует комбинацию из интерлиньяжа, размера шрифта, цвета и белого пространства для того, чтобы отделить контент внутри каждого блока. Это позволяет пользователям легче его сканировать.

3) Цвет

Теория цвета, правда, очень и очень сложна. Моя цель не в том, чтобы рассказать вам всю теория цвета, а в том, чтобы дать вам несколько принципов, которые вы сможете использовать в своём дизайне уже сейчас.

Если вы посмотрите на картинку выше, то увидите, что синий квадрат слева кажется дальше, чем красный квадрат справа. Теплые цвета кажутся ближе, тогда как холодные, наоборот, сливаются с фоном. Давайте посмотрим на этот пример:

Дизайнер использует тёплый красный цвет, чтобы выделить призыв к действию, и холодный синий, чтобы утопить навигацию. Тот же самый приём используется и на иллюстрации слева. Красная иконка с молнией сразу же выделяется на фоне всего остального.

Также вы можете использовать цвет, чтобы сгруппировать похожие элементы.

И наконец, меньше значит больше. Чем больше цветов вы используете, тем меньше значение каждого из них. Отличный пример — это последний редизайн Instagram.

Уменьшение количества используемых цветов не только позволило выделить фотографии, но и увеличило эффективность уведомлений, так как им больше не нужно соревноваться с другими цветами на верхней и нижней панели.

Дизайнер интерфейсов – обучение с нуля дизайну интерфейсов, онлайн-курс от GeekBrains

Евгений Плужников

Старший продуктовый дизайнер в ЛитРес, куратор факультета UX/UI

Был дизайнером в компании «Алмаз-Антей», также работал с облачными операционными системами, системами для удалённой работы и агротехническим мониторингом.

Мария Чугрина

Директор по рекламе в ГК «ХимАльянс»

Более 8 лет опыта в графическом дизайне: работала с Vitra, Mercedes-Benz, Unilever.

Сергей Чирков

Основатель CHYRKOV studio

В 2018 году студия заняла первое место в рейтинге Рунета «Лучшие digital-студии в сфере туризма». Креативный директор Intourist Thomas Cook.

Анастасия Чиханова

Дизайнер с 2007 года

Продуктовым дизайном в современном его понимании начала заниматься в 2011. Среди клиентов — МТС, ASUS, Intel, Microsoft, Mastercard, «РИВ ГОШ» и многие другие.

Екатерина Качлаева

Графический дизайнер в Employer Brand-агентстве Changellenge

Участвует в тендерах, создаёт концепты, развивает SMM. Занималась перестройкой отдела и исследованием потребителей в Ikea, участвовала в обустройстве здания Matrex в Сколково.

Анатолий Карев

UX/UI-дизайнер, фрилансер, владелец веб-студии

Начинал свой путь в IT-компании Demis Group.

Ярослава Костицына

UI/UX-дизайнер

В профессии более 10 лет. Работала в компаниях Nimax и Clay. Один из последних проектов — внутренняя система оформления заказов крупного российского ретейлера.

Елизавета Хан

Фрилансер

Сотрудничает с прямыми заказчиками: выполняет редизайн сайтов и продумывает юзабилити.

Михаил Кайнов

Lead product designer в российской IT компании R7 (rseven)

Занимается прототипированием и дизайном мобильных приложений, их промосайтов и лендингов. До этого работал старшим дизайнером в компании EMAILMATRIX: делал сайты, сервисы со сложными интерфейсами, письма, лонгриды, лендинги и промосайты.

Максимилиан Сапожников

UX-исследователь в Mail.ru

Выстраивает исследовательские процессы и улучшает юзабилити. Раньше работал в UsabilityLab — проводил UX-исследование мобильного банка на таджикском и узбекском языках. В Циане занимался редизайном сервиса для риелторов.

Алексей Комаров

UX/UI-дизайнер в IBM

Проектирует аналитическую систему для нефтедобывающей компании, работает в команде, создающей российский аналог дизайн-системы Carbon для веб- и мобильных платформ. До этого в Сбербанке отвечал за разработку мобильных приложений для корпоративного блока.

Алексей Кадочников

Frontend Developer в Mail.ru Group

Ведущий преподаватель GeekBrains, обучил более 30 000 студентов. Эксперт в области backend-разработки для интернет-магазинов.

Мария Амирханян

Ведущий UX-исследователь игрового направления в Mail.ru Group

Курирует игровые UX-исследования. Сложные и комплексные проводит сама: исследует аудиторию, тестирует концепты, идеи и ранние версии билда, изучает возможные фичи.

Екатерина Тюхай

UX Lead в ВТБ

Фасилитатор курса UX/UI Британской высшей школы дизайна, исследователь, предприниматель. В 2019 году организовала «Дизайн-регату».

Ростислав Курьянов

Моушен-дизайнер, фрилансер

Разрабатывает медиаконтент для LED-стены шоу-пространства «Ленинград Центр». Сотрудничал с киностудией «Футурум», создавал медиаконтент на аутсорсе для различных клиентов компании.

Карен Ананян

Веб-дизайнер, разработчик сайтов на Tilda

В агентстве «Интернет-компания Юг» создавал дизайн продающих лендингов, рекламы и социальных сетей. В компании Changellenge работал над внутренними и клиентскими продуктами. Развивает личный бренд (Ez Dizzi) и ведёт блог с советами и инструкциями.

Геннадий Мохов

Sr. Product Designer in Alfa-Bank

Работал дизайнером, арт-директором, креативным директором в агентствах. Создавал айдентику, рекламные кампании, сайты для Газпрома, Yota, Инград, Coca-Cola и других компаний.

Марина Нефёдова

Графический дизайнер в «Мэлон Фэшн Груп»

В дизайне уже 10 лет. Была фрилансером и рисовала принты на микростоки, затем — для одежды. Начинала с детских брендов: Crockid, Chinzari, Maru-maru. Сейчас работает с befree.

Дизайн интерфейсов. Разработка и дизайн пользовательского интерфейса | Рекламное агентство PIX media

Рынок дизайн услуг непрерывно совершенствуется. Особенно стремительные темпы развития демонстрирует рынок дизайна web интерфейсов. Большинство компаний, нуждающихся в разработке web ресурса, прибегают к услугам студий, разрабатывающих сайт комплексно: от создания дизайна до конечной сборки и продвижения. Что вполне логично, ведь заказывать сайт, приложение или софт в разных местах по частям, а затем контролировать каждый этап и каждого отдельного исполнителя — достаточно хлопотно и затратно.

Дизайн пользовательского интерфейса, как показывает практика, нуждается в детальной проработке на каждом этапе создания. Связано это со сложностью большинства коммерческих разработок, будь то игра, приложение на планшет или корпоративный сайт. Каждый вид информационных продуктов имеет свои особенности, но общие принципы проектирования интерфейсов неизменны для всех. Частично они определяются задачей проекта, частично — логикой и здравым смыслом, а также исследованиями в области психологии восприятия информации, методиками улучшения юзабилити и современными тенденциями. В совокупности все эти данные дают достаточно информации для того, чтобы приступить к разработке дизайна пользовательского интерфейса на профессиональном уровне. Базовую информацию о дизайне сайтов можно узнать из статьи: Веб дизайн сайтов: разработка веб дизайна, современные тенденции.Дизайн интерфейса сайта, в отличие от простого графического дизайна, должен следовать не только общим художественным требованиям и последним трендам, но также быть в достаточно степени понятным и универсальным. Уровень технического развития на современном этапе позволяет выходить в сеть интернет даже с телевизора и некоторых моделей холодильников. Это не шутка. Адаптивность дизайна пользовательского интерфейса заключается в универсальном визуальном отображении и адекватном расположении элементов интерфейса на большинстве устройств с доступом в сеть интернет. Толчком к разработке адаптивного дизайна веб интерфейса стало проворство, с которым устройства «большого пальца» стали отвоевывать целые сегменты рынка у персональных компьютеров, сотовых телефонов и даже фотоаппаратов. Первоначально студии обходились разработкой дизайнов мобильных интерфейсов, используемых в компактных, ограниченных в функционале и контенте мобильных версиях сайтов. Позже, когда невзрачность оформления и скромный набор функционала мобильной версии сайта стали явно занижать потенциал интернет ресурсов и влиять на посещаемость, назрел вопрос адаптации всего сайта под мобильные устройства. Практически одновременно с этим массовое производства портативной техники с сенсорным управлением спровоцировало переработку дизайна веб интерфейсов под тактильное управление. Помимо адаптивности современный дизайн мобильных интерфейсов должен соответствовать нескольким важным требованиям. В первую очередь, дизайн интерфейса должен быть наглядным, и все навигационные элементы должны трактоваться однозначно, элементы управления — указывать на конкретные действия, а также позволять посетителю легко выполнять необходимые манипуляции. Частично на это ориентирован графический дизайн. Посетитель всегда должен понимать, в каком именно разделе сайта он находится, и как перейти в другой. Таким образом, разработка дизайна интерфейса — задача не столько графическая, сколько основополагающая в организационном плане. В проектировании и дизайне интерфейсов закладываются основы удобства и простоты пользования сайтом, от которых зависит, посетит ли пользователь сайт ещё раз. Многое из опыта проектирования и дизайна пользовательского интерфейса сайтов позаимствовали студии, разрабатывающие дизайн интерфейсов мобильных приложений. И наоборот. Симбиоз разработчиков, в конечном итоге определил основные принципы: наглядность, интуитивная навигация и адаптация под тактильное управление. Без подобных преображений дизайн интерфейсов приложений практически нет смысла переносить на мобильную платформу с персональных компьютеров. Подробнее о разработке мобильных приложений в статьях: Разработка приложений, стоимость. Как заказать разработку приложения, и Создание мобильных приложений. Заказать приложение для android и iOS.Дизайн интерфейса программы, разработанной под управление различными манипуляторами стационарных компьютеров, никогда не будет комфортно эксплуатироваться на устройствах, с тактильным управлением. Таким образом, игнорирование ключевой роли дизайна пользовательского интерфейса при разработке игры или софта может свести на нет все дизайнерские ухищрения, визуальные эффекты и качественный контент продукта, тем самым бросить тень на торговую марку или продукт, которые продвигаются на рынок. Чтобы подобного не проиcходило, а визуальное оформление продукта работало во благо компании, к разработке дизайна интерфейса необходимо подходить профессионально. И начинать с подготовки единой концепции дизайна. Об этом речь идет в статье: Дизайн концепция проекта. Разработка концепции дизайна. О компаниях, способных на высшем уровне решать подобные задачи, написана статья Дизайн студия в Москве и СПб, студия веб дизайна сайтов. Услуги и цены. А некоторые рекламные технологии, применяемые в дизайне упаковки товара, описаны в статье Дизайн упаковки товара и этикетки: разработка дизайна упаковки, цена.

Что такое UI и UX дизайн design? Что в них общего и что различного? | by Writes

Всем привет! Предлагаем вам изучить простой в освоении материал, чтобы лучше понять разницу между дизайном пользовательского интерфейса (UI) и пользовательским интерфейсом (UX)

UI-дизайн и UX-дизайн — два наиболее часто запутанных и противоречивых понятия, использующихся как в веб-дизайне, так и в дизайне приложений. Обычно их совмещают вместе в один термин — UI/UX-дизайн и с первого взгляда кажется, что они описывают один и то же процесс. Часто бывает трудно найти четкое описание для каждого из них в отдельности, не опускаясь при этом до профессионального жаргона. Однако мы постараемся сделать это!

Ниже, мы подготовили простой в освоении материал по этим терминам.
К концу этой статьи вы будете достаточно хорошо понимать, Что в них схожего и что различного. Итак, давайте приступим!

«UI Design» переводится как «пользовательский интерфейс». Пользовательский интерфейс представляет собой графическую структуры приложения. Он состоит из кнопок, нажимаемых пользователями, текстов, которые они читают, изображений, полей ввода текста и всех остальных элементов, с которыми взаимодействует пользователь. Кроме того, он включает в себя макет экрана, переходы, анимацию интерфейса и каждое микро-взаимодействие. Любой визуальный элемент, взаимодействие или анимация должны быть разработаны в процессе UI-дизайна.

Эта работа ложится на дизайнеров пользовательского интерфейса (UI-дизайнер). Они решают, как визуально будет выглядеть приложение. Именно они должны выбирать цветовые схемы и формы кнопок — ширину линий и шрифты, используемые для текста. Если обобщить, то дизайнеры пользовательского интерфейса создают внешний вид интерфейса приложения.

Процесс проектирования пользовательского интерфейса от команды Ramotion

UI-дизайнеры это в первую очередь графические дизайнеры. Они связаны с эстетикой и должны убедиться, что интерфейс приложения привлекателен, визуально стимулирует пользователя и соответствует тематике, которая в свою очередь должна соответствовать целям и задачам приложения. Поэтому нужно убедиться, что каждый визуальный элемент является единым, как в эстетическом, так и в целевом смысле.

«UX» переводится как «пользовательский опыт». Пользовательский опыт приложения определяется тем, как пользователи взаимодействуют с приложением. Является ли опыт пользователя интуитивно-понятными или наоборот запутывает его? Навигация в приложении кажется логичной или не поддающейся логике? Дает ли людям взаимодействие с приложением ощущение, что они эффективно выполняют задачи, которые они поставили перед собой, или это похоже на блуждание по замкнутому кругу и ощущение безысходности? Опыт пользователя определяется тем, насколько легко или сложно взаимодействовать с элементами пользовательского интерфейса, созданными дизайнерами пользовательского интерфейса.

Фото CareerFoundry

При этом UX-дизайнеры также заботятся о пользовательском интерфейсе приложения, и именно поэтому люди часто путаются, не находя разницу между ними. Но в то время, как UI- должны решать, как будет выглядеть пользовательский интерфейс, UX-дизайнеры отвечают за определение того, как работает пользовательский интерфейс.

Они определяют структуру интерфейса и функциональность и то, как все части приложения организованы и связаны друг с другом. В общем говоря, они проектируют работу интерфейса. Если он работает хорошо, то у пользователя будет хороший опыт после взаимодействия с таким интерфейсом. Но если навигация сложная или не интуитивно понятная, то скорее всего, пользователь испытает отвращение при взаимодействии с интерфейсом. Основная задача UX дизайнера и состоит в том, чтобы избежать второго сценария.

Итак, как мы говорили выше, UX-дизайнер решает, как будет работать пользовательский интерфейс, а UI-дизайнер решает, как будет выглядеть пользовательский интерфейс. Это параллельный процесс, и две команды дизайнеров, как правило, работают в тесном сотрудничестве. В то время, как команда UX-дизайнеров разрабатывает, так называемый поток приложения (application flow) и определяет каким образом все элементы будут навигировать пользователя по его запросам и как интерфейс эффективно удовлетворит потребности пользователя в информации, команда UI-дизайнеров работает над тем, как будут выглядеть все эти элементы интерфейса непосредственно на экране.

Предположим, что на каком-то этапе процесса разработки было решено, что на экран необходимо добавить дополнительные кнопки. Естественно, это изменит порядок организации кнопок и может потребовать изменения их формы или размера. UX-команда определит лучший способ размещения кнопок, в то время как UI-команда адаптирует свой дизайн, чтобы всё соответствовало новому макету. Постоянное общение и сотрудничество между UI- и UX-командой дизайнеров позволяет гарантировать, что конечный пользовательский интерфейс выглядит настолько хорошо, насколько это возможно, и при этом работает эффективно и интуитивно понятно.

Исследование является жизненно необходимым процессом как для UI-, так и для UX-дизайнеров. Для обоих направлений важно собрать как можно больше полезной информации, которая поможет им в процессе разработки соответствующих проектов. При этом оба направления придерживаются схожего подхода.

Естественно и UI- и UX-дизайнеры будут исследовать то, чего хотят пользователи. А именно, чего же они ожидают от разрабатываемых приложений? Это исследование повторяется с определенной частотой и включает в себя сеансы так называемых юзабилити-тестов, где реальные пользователи будут взаимодействовать с масштабированными версиями некоторых определенных функций приложения, чтобы определить, в правильном ли направлении движутся дизайнеры. Обратная связь интегрируется с каждой итерацией.

Этот процесс включает в себя создание прототипов, таких как каркасная визуализация элементов интерфейса, который необходим для более точного измерения реакции пользователя на тестируемую функциональность. Это может также включать быстрые визуальные прототипы и A/B-тесты различных возможных версий внешнего вида интерфейса, чтобы определить, какую из версий предпочитают пользователи.

Tweet by LukeW

Во всех описанных случаях исследования помогают дизайнерам при финальном принятии решений. Однако информация, которую ищут UI- и UX-дизайнеры, сильно отличается.

Прежде всего, UI-дизайнеры должны убедиться, что выбранный ими визуальный язык соответствует классу приложения. Если ваша команда разрабатывает приложение для путешествий, важно изучить, как другие приложения для путешествий разрабатывались в прошлом. Какие из них решили свою задачу? Из решений, которые другие команды делали раньше, можно извлечь хороший урок для того чтобы приступить к дизайну своего приложения.

Например, исследования могут определить, что люди предпочитают иконки с линиями вместо иконок с заливкой. Это визуальная стенография, которая удобна и приятна людям.

Точная эстетика, которую они выбирают, зависит от них, но основные «правила» или необходимость соответствовать ожиданиям пользователей — это то, что дизайнеры игнорируют на свой страх и риск.

Дизайнеры пользовательского интерфейса хотят, чтобы их дизайн интерфейса выделялся и был запоминающимся. Но это должно быть сбалансировано с тем, чтобы люди понимали назначение элементов, которые вы размещаете на экране.

Те кто работают в UX-дизайне наиболее заинтересованы в ожиданиях пользователей. Все события и взаимодействия, которые пользователи имели с каждым приложением ранее в своей жизни, помогают установить их ожидания относительно того, как интерфейсы должны работать. Если UX-дизайнер не знаком с этими ожиданиями, он может непреднамеренно спроектировать интерфейсное взаимодействие, которое кажется им логичным, но нарушает общепринятые представления. Пользователям не нравится, когда интерфейс ведёт себя совершенно иначе, чем они ожидали, и это может негативно повлиять на их работу.

Если UX-дизайнер решит сделать что-то другое, у него должна быть очень веская причина, потому что нарушение ожидаемого поведения, вероятно, заставит людей часто совершать неправильные действия.

Например, большинству людей нравится идея того, что если вы дважды щелкаете файл для того чтобы открыть его, и один раз, чтобы выбрать его.

UI-дизайн и UX-дизайн включают в себя разные наборы навыков, но они являются неотъемлемой частью успеха друг друга. Красивый дизайн не может спасти интерфейс, который неудобен и запутан в навигации, а блестящий, идеально подходящий пользовательский интерфейс может быть испорчен плохим визуальным интерфейсом, который делает использование приложения эстетические неприятным для пользователя.

Как UI-дизайн, так и UX-дизайн должны быть безупречно выполнены и идеально согласованы с ранее существовавшими ожиданиями пользователей для создания лучшего пользовательского опыта. И лишь когда эти две «звезды совпадут», результаты могут быть поразительными.

26 лекций для дизайнеров интерфейсов

В рамках курса рассматриваются работы, проекты, принципы организаций и различные деятельности в области проектирования и дизайна интерфейсов.

Курс дает понимание базовых принципов и подходов к проектированию пользовательских интерфейсов.

Дмитрий Карпов — Что такое сетка и для чего она нужна

Олег Чулаков — В чем главная задача анимации в UI

Никита Обухов — Модульный дизайн. Изучение и стандартизация подачи информации в веб

Геннадий Лохтин — Будущее интерфейсов браузеров

Юрий Ветров — Дизайн-команда в продуктовой компании

Анна Кармишина — Здравый смысл, брендинг, веб и как всё это связано

БВШД: Дизайн мобильных приложений

Никита Ефимов — Процесс проектирования интерфейса: зачем нужен этап анализа

Дмитрий Сатин — Социально-ориентированное проектирование

Фёдор Аксёнов — Дистанционное UX–тестирование

Роман Черных— Поиск и дифференциация UX-персонала

Михаил Сокольников — Дизайн-мышление в финтехе: вызовы и лучшие практики

Мария Сташенко — Проектирование пользовательского опыта горожан

Алексей Бородкин — Как подружить разработку и UX

Дизайн приложения

Дизайн экрана мобильного приложения в Sketch 3

Создание анимации для мобильного приложения

Константин Горский — Дизайн интерфейсов

Особенности проектирования интерфейсов для Smart TV

Как найти и устранить проблемы веб-интерфейса

Сайт как интерфейс взаимодействия с пользователем

Платон Днепровский — Введение в дисциплину проектирования UI. Общие сведения

Антон Алябьев — Сбор и анализ требований к интерфейсу

Антон Алябьев — Методики Персонажей, форматы сценариев

Платон Днепровский — Сервис-дизайн, информационная архитектура

Платон Днепровский — Введение в дисциплину. Общие сведения

Что такое дизайн пользовательского интерфейса?

Научитесь разрабатывать с учетом потребностей и ожиданий пользователей, применяя «Десять рекомендаций по пользовательскому интерфейсу» Якоба Нильсена и Рольфа Молича. Эта эвристика нашла отражение во многих продуктах, разработанных некоторыми из самых успешных компаний в мире, такими как Apple, Google и Adobe. Дополнительное свидетельство того, как их проектные группы включают эти правила в свой процесс проектирования, отражено в руководствах по пользовательскому интерфейсу, опубликованных и распространенных этими компаниями.В этой статье вы узнаете, как следовать десяти эмпирическим правилам при проектировании, чтобы вы могли еще больше повысить удобство использования, полезность и желательность своих дизайнов.

10 рекомендаций Нильсена и Молиха по дизайну пользовательского интерфейса

Якоб Нильсен, известный консультант по веб-юзабилити и партнер Nielsen Norman Group, и Рольф Молич, другой известный эксперт по юзабилити, составили список из десяти руководств по дизайну пользовательского интерфейса в 1990-х годах. Обратите внимание на то, что эвристика Нильсена и Молиха во многом пересекается с «восемью золотыми правилами» Бена Шнейдермана.Эти 10 практических правил являются продолжением восьми золотых правил Шнейдермана через 4 года после первой публикации Шнейдермана.

Просмотр статуса системы . Пользователи всегда должны быть проинформированы о системных операциях с легким для понимания и хорошо заметным статусом, отображаемым на экране в течение разумного периода времени.
Соответствие системы и реального мира . Дизайнеры должны стремиться отражать язык и концепции, которые пользователи могут найти в реальном мире, в зависимости от того, кем являются их целевые пользователи.Представление информации в логическом порядке и совмещение ожиданий пользователей, основанных на их реальном опыте, снизят когнитивное напряжение и упростят использование систем.
Контроль и свобода пользователя . Предложите пользователям цифровое пространство, где возможны обратные шаги, включая отмену и повтор предыдущих действий.
Согласованность и стандарты . Разработчики интерфейсов должны гарантировать, что и графические элементы, и терминология поддерживаются на одинаковых платформах.Например, значок, представляющий одну категорию или концепцию, не должен представлять другую концепцию при использовании на другом экране.
Предотвращение ошибок . По возможности проектируйте системы так, чтобы возможные ошибки были сведены к минимуму. Пользователи не любят, когда их призывают выявлять и устранять проблемы, которые иногда могут выходить за рамки их уровня знаний. Устранение или отметка действий, которые могут привести к ошибкам, — два возможных способа предотвращения ошибок.
Признание, а не отзыв. Сведите к минимуму когнитивную нагрузку, сохраняя релевантную для задачи информацию на дисплее, пока пользователи исследуют интерфейс. Человеческое внимание ограничено, и мы способны одновременно поддерживать только около пяти элементов в нашей кратковременной памяти. Из-за ограничений кратковременной памяти дизайнеры должны гарантировать, что пользователи могут просто использовать распознавание вместо того, чтобы вспоминать информацию по частям диалога. Распознать что-либо всегда легче, чем вспомнить, потому что распознавание включает в себя восприятие сигналов, которые помогают нам проникнуть в нашу обширную память и позволяют всплыть на поверхность релевантной информации.Например, мы часто находим формат вопросов с несколькими вариантами ответов в тесте проще, чем вопросы с короткими ответами, потому что он требует от нас только распознать ответ, а не вспоминать его из своей памяти.
Гибкость и эффективность использования . С увеличением использования возникает потребность в меньшем количестве взаимодействий, что обеспечивает более быструю навигацию. Это может быть достигнуто с помощью сокращений, функциональных клавиш, скрытых команд и макросов. Пользователи должны иметь возможность настраивать или адаптировать интерфейс в соответствии со своими потребностями, чтобы частые действия можно было выполнять более удобными способами.
Эстетичный и минималистичный дизайн . Сведите к минимуму беспорядок. Вся ненужная информация конкурирует за ограниченные ресурсы внимания пользователя, что может препятствовать поиску пользователем в памяти соответствующей информации. Следовательно, отображение должно быть сокращено до только необходимых компонентов для текущих задач, обеспечивая при этом четко видимые и однозначные средства перехода к другому контенту.
Помогите пользователям распознавать, диагностировать и устранять ошибки .Разработчики должны исходить из того, что пользователи не могут понять техническую терминологию, поэтому сообщения об ошибках почти всегда должны быть выражены простым языком, чтобы ничего не потерялось при переводе.
Справка и документация . В идеале мы хотим, чтобы пользователи перемещались по системе, не прибегая к документации. Однако в зависимости от типа решения может потребоваться документация. Когда пользователям требуется помощь, убедитесь, что ее легко найти, она соответствует поставленной задаче и сформулирована таким образом, чтобы помочь им сделать необходимые шаги для решения проблемы, с которой они сталкиваются.

Google Inc., технологическая компания с многомиллиардным оборотом, безусловно, производит проекты, которые отражают вышеперечисленные эвристики. Джон Уайли, главный дизайнер Google Search в 2012 году, однажды сказал:

«Когда я думаю о дизайне и создании отличного пользовательского опыта, я обычно думаю о нем с точки зрения трех вещей: удобства использования, полезности и желательности».

10 рекомендаций Нильсена и Молиха по пользовательскому интерфейсу довольно хорошо охватывают эти три ключевых компонента пользовательского опыта, а это означает, что вы, вероятно, сможете улучшить пользовательский опыт своих проектов, следуя этим рекомендациям!

Узнайте, как Adobe объединяет десять рекомендаций по дизайну пользовательского интерфейса Nielsen и Molich

Adobe Systems Incorporated, крупная североамериканская компания, производящая компьютерное программное обеспечение, является отличным примером того, как дизайн, отражающий десять рекомендаций Nielsen и Molich по пользовательскому интерфейсу, может привести к успеху компании. .Один из их самых популярных продуктов, Adobe Photoshop, редактор растровой графики, демонстрирует характеристики хорошо продуманного пользовательского интерфейса, который отражает эти рекомендации.

Мы более подробно рассмотрим, как Adobe Photoshop отражает каждое из этих руководящих принципов, чтобы вдохновить вас улучшить удобство использования, полезность и желательность ваших собственных дизайнов, включив 10 практических правил в свою работу.

1. Видимость состояния системы

Photoshop отлично справляется с задачей, позволяя пользователю узнать, что происходит с программой, визуально показывая пользователю, к чему привели его действия, когда это возможно.Например, когда пользователи перемещают слои в палитре «Слои», они могут визуально видеть слой, представленный как физически перетаскиваемый в пространстве.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Графика курсора переходит от раскрытой руки к зажатой, когда пользователь перетаскивает слой внутри палитры слоев. Это упрощает мгновенное понимание состояния системы.Кроме того, выбор Adobe использования «руки» — отличный пример второго правила, согласно которому система соответствует реальному миру.

2. Соответствие системы реальному миру

Пример Photoshop, имитирующего реальный мир в терминах и представлениях, понятных их целевым пользователям, — это то, где они разрабатывают информационную структуру и терминологию, отражающую те же формулировки, которые мы использовали бы в мир фотографии или печатных СМИ. Знакомые концепции и термины, такие как RGB, Hue / Saturation / Brightness и CMYK, используются для представления цвета, в то время как различные инструменты, такие как Dodge Tool и Burn Tool, имитируют традиционную технику фотолаборатории для фотографий.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Инструменты Dodge Tool и Burn в Photoshop имитируют традиционную технику фотолаборатории для фотографий

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

В Photoshop используется термин «Экспозиция», который обычно используется в мире фотографии.

3. Пользовательский контроль и свобода

Photoshop очень хорош в предоставлении пользователям контроля на каждом этапе пути. Когда пользователь вносит изменения в изображение или добавляет различные художественные эффекты, он может быстро и легко сделать шаг назад, например, в случае ошибки.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Все в руках пользователей, поскольку они могут сделать шаг назад или шаг вперед в меню «Правка» или, в качестве альтернативы, они могут использовать сочетания клавиш Photoshop, например, Alt + Ctrl + Z.

4. Согласованность и стандарты

Photoshop поддерживает стандартный макет и внешний вид, когда дело доходит до строки меню. Они также используют общеизвестные термины, такие как «Новый…», «Открыть…», «Сохранить как…» и т. Д.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Меню «Файл» в Photoshop отображает множество хорошо знакомых параметров.

5.Предотвращение ошибок

Чтобы пользователи не совершали ошибок, Photoshop предоставляет краткое описание или метку инструментов, когда пользователь наводит на них курсор, чтобы убедиться, что пользователи используют правильный инструмент для выполнения поставленной задачи.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Пользователь наводит курсор на значок ластика, и Photoshop отображает ярлык «Инструмент ластика».

6.Распознавание, а не повторение

Делает ли он выбор из меню художественных фильтров или открывает новый файл изображения, Photoshop предоставляет пользователям образец представления, чтобы они могли сделать правильный выбор. Это позволяет пользователю визуально распознать то, что он ищет, вместо того, чтобы вспоминать имя или вводить его для поиска. Возможно, вы сталкивались с другими программами для редактирования фотографий, которые просят вас вспомнить и ввести имя файла, с которым вы хотите работать. Это действительно может быть действительно трудно вспомнить, поскольку часто это что-то вроде: 29412_09342.JPG.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Пользователь может визуально распознать изображение заката по его миниатюре и выбрать его.

7. Гибкость и эффективность использования

Одной из многих причин, по которым частые пользователи любят Photoshop, является его гибкость и эффективность. Пользователи могут использовать его гибкость, организуя и добавляя свое рабочее пространство, а также делая вещи более эффективными, сохраняя его для использования в будущем.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

Photoshop дает частым пользователям возможность сохранить предпочтительные настройки рабочего пространства.

8. Эстетичный и минималистский дизайн

Панель инструментов в Photoshop отображает только значки и аккуратно спрятана в сторону, чтобы свести к минимуму беспорядок и сохранить эстетику минимализма.

Автор / правообладатель: Adobe Systems Incorporated.Условия авторских прав и лицензия: Добросовестное использование

Панель инструментов Photoshop минималистична и позволяет избежать беспорядка, представляя инструменты только с помощью значков.

9. Помощь пользователям в распознавании, диагностике и устранении ошибок

При возникновении ошибки Photoshop предоставляет диалог, который позволяет пользователю узнать, что пошло не так и как ее исправить.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

В этом сообщении об ошибке из-за неправильного использования штампа клонирования пользователем Photoshop объясняет, что пошло не так, почему и как пользователю следует действовать дальше.

10. Справка и документация

Справка и документация легко доступны через строку главного меню. Здесь вы можете найти множество разделов справки и руководств о том, как в полной мере использовать программу.

Автор / правообладатель: Adobe Systems Incorporated. Условия авторских прав и лицензия: Добросовестное использование

В окне отображается информация о том, как создавать ролловеры в контексте веб-графики. Пользователь также может видеть список тем в боковом меню.

10 шагов к повышению удобства использования, полезности и желательности путем внедрения рекомендаций Нильсена и Молиха по проектированию пользовательского интерфейса

Как дизайнер, вы должны иметь возможность критиковать свои собственные проекты, а также работы других людей с хорошо обоснованной аргументацией . Применение 10 эмпирических правил Нильсена и Молиха при оценке дизайна интерфейса поможет вам распознать любые потенциальные проблемы, а также поможет вам и вашей команде улучшить взаимодействие с пользователями.Вот таблица, с которой вы можете попрактиковаться, когда научитесь распознавать, были ли применены эти правила и когда эти правила были нарушены. Наконец, пришло время улучшить веб-сайт или приложение, выполнив 10 рекомендаций.

Скачать PDF можно здесь .

Вывод

Если вы будете следовать 10 рекомендациям Нильсена и Молиха по пользовательскому интерфейсу, вы будете проектировать с учетом удобства использования, полезности и желательности.Так же, как дизайнеры таких успешных компаний, как Apple, Google и Adobe, вы сможете поддерживать свои дизайнерские решения с помощью хорошо изученных эвристических методов и быть уверенными в создании дизайна, который одновременно удобен и красив. Чтобы попрактиковаться в распознавании этих 10 практических правил, продолжайте выполнять упражнение, описанное в прилагаемом файле из приведенного выше раздела.

Где узнать больше

Чтобы найти дополнительную информацию о книге Якоба Нильсена «Повышение объяснительной силы эвристики юзабилити», перейдите по ссылке:

https: // static.aminer.org/pdf/PDF/000/089/679/enha …

Ссылки и где узнать больше

Изображение героя: Автор / Правообладатель: Барри Шварц. Flickr. Условия авторских прав и лицензия: CC BY-NC 2.0

Курс: Шаблоны проектирования пользовательского интерфейса для успешного программного обеспечения:
https://www.interaction-design.org/courses/ui-design-patterns-for-successful-software

Основы проектирования пользовательского интерфейса | Usability.gov

Дизайн пользовательского интерфейса (UI) фокусируется на прогнозировании того, что пользователи могут сделать, и обеспечении того, чтобы в интерфейсе были элементы, которые легко получить, понять и использовать для облегчения этих действий.Пользовательский интерфейс объединяет концепции дизайна взаимодействия, визуального дизайна и информационной архитектуры.

Выбор элементов интерфейса

Пользователи познакомились с элементами интерфейса, действующими определенным образом, поэтому постарайтесь быть последовательными и предсказуемыми в своем выборе и их расположении. Это поможет с выполнением задачи, эффективностью и удовлетворением.

Элементы интерфейса включают, но не ограничиваются:

Элементы управления вводом : кнопки, текстовые поля, флажки, переключатели, раскрывающиеся списки, списки, переключатели, поле даты
Навигационные компоненты : навигационная цепочка, слайдер, поле поиска, разбивка на страницы, слайдер, теги, значки
Информационные компоненты : всплывающие подсказки, значки, индикатор выполнения, уведомления, окна сообщений, модальные окна
Контейнеры : гармошка

Бывают случаи, когда для отображения содержимого может подходить несколько элементов.Когда это происходит, важно подумать о компромиссах. Например, иногда элементы, которые могут помочь вам сэкономить место, создают дополнительную нагрузку на пользователя мысленно, заставляя его угадывать, что находится в раскрывающемся списке или что это за элемент.

Лучшие практики для проектирования интерфейса

Все зависит от знания ваших пользователей, включая понимание их целей, навыков, предпочтений и тенденций. Узнав о своем пользователе, при разработке интерфейса обязательно учтите следующее:

Сделайте интерфейс простым. Лучшие интерфейсы практически незаметны для пользователя. Они избегают ненужных элементов и ясно говорят на языке, который они используют на этикетках и в сообщениях.
Обеспечьте единообразие и используйте общие элементы пользовательского интерфейса. Используя общие элементы в пользовательском интерфейсе, пользователи чувствуют себя более комфортно и могут выполнять задачи быстрее. Также важно создавать шаблоны в языке, макете и дизайне по всему сайту, чтобы повысить эффективность. Как только пользователь узнает, как что-то делать, он сможет передать этот навык другим частям сайта.
Будьте целенаправленны в макете страницы. Учитывайте пространственные отношения между элементами на странице и структурируйте страницу в зависимости от важности. Тщательное размещение элементов может помочь привлечь внимание к наиболее важным фрагментам информации, а также улучшить сканирование и удобочитаемость.
Стратегически используйте цвет и текстуру. Вы можете направлять внимание или отвлекать внимание от предметов, используя цвет, свет, контраст и текстуру в ваших интересах.
Используйте типографику для создания иерархии и ясности. Внимательно подумайте о том, как вы используете гарнитуру. Различные размеры, шрифты и расположение текста для повышения удобочитаемости и читаемости.
Убедитесь, что система сообщает о том, что происходит. Всегда сообщайте своим пользователям о местоположении, действиях, изменениях состояния или ошибках. Использование различных элементов пользовательского интерфейса для сообщения статуса и, при необходимости, следующих шагов может уменьшить разочарование вашего пользователя.
Подумайте о значениях по умолчанию. Тщательно обдумывая и предвидя цели, которые люди ставят перед вашим сайтом, вы можете создать настройки по умолчанию, которые снизят нагрузку на пользователя.Это становится особенно важным, когда речь идет о дизайне форм, где у вас может быть возможность предварительно выбрать или заполнить некоторые поля.

Список литературы

4 золотых правила дизайна пользовательского интерфейса

Пользовательский интерфейс (UI) является важной частью любого программного продукта. Когда все сделано хорошо, пользователи этого даже не замечают. Когда что-то сделано плохо, пользователи не могут обойтись без этого, чтобы эффективно использовать продукт. Чтобы увеличить шансы на успех при создании пользовательских интерфейсов, большинство дизайнеров следуют принципам проектирования интерфейсов.Принципы проектирования интерфейсов представляют собой высокоуровневые концепции, которые используются для разработки программного обеспечения. В этой статье я поделюсь несколькими фундаментальными принципами. Они основаны на «10 эвристиках юзабилити для дизайна пользовательского интерфейса» Якоба Нильсена, «Восьми золотых правилах дизайна интерфейсов» Бена Шнейдермана и «Принципах дизайна взаимодействия» Брюса Тоньяццини. Большинство принципов применимо к любым интерактивным системам — традиционным средам графического интерфейса пользователя (таким как настольные и мобильные приложения, веб-сайты) и интерфейсам без графического интерфейса пользователя (например, системам голосового взаимодействия).

Принципы разработки пользовательского интерфейса:

Предоставьте пользователям возможность управлять интерфейсом
Сделайте взаимодействие с продуктом удобным
Снизьте когнитивную нагрузку
Сделайте пользовательский интерфейс согласованным

1. Предоставьте пользователям контроль над интерфейсом

Хорошие пользовательские интерфейсы создают ощущение контроль в своих пользователях. Сохранение контроля над пользователями делает их удобными; Oни быстро научится и быстро обретет чувство мастерства.

Сделай действия обратимыми — будь снисходительным

Это правило означает, что пользователь всегда должен иметь возможность быстро вернуться к любому они делают.Это позволяет пользователям изучать продукт без постоянного боязнь неудачи — когда пользователь знает, что ошибки можно легко исправить, это побуждает исследовать незнакомые варианты. Напротив, если пользователю нужно будьте предельно осторожны с каждым своим действием, это приводит к более медленному исследование и нервный опыт, который никому не нужен.

Возможно наиболее распространенные графические интерфейсы, в которых у пользователей есть Опция «Отменить / Вернуть» доступна в текстовом и графическом редакторах. При написании текста или создавая графику, «Отменить» позволяет пользователям вносить изменения и шаг за шагом возвращаться через внесенные изменения.»Повторить» позволяет пользователям отменить отмену, что означает что, сделав несколько шагов назад, они могут продвинуться вперед через снова меняется.

«Отменить» может быть чрезвычайно полезным, когда пользователи ошибочно выбирают функцию системы. В этом В этом случае функция отмены служит «аварийным выходом», позволяя пользователям покинуть нежелательное состояние. Хорошим примером таких аварийных выходов является уведомление Gmail. сообщение с возможностью отмены, когда пользователи случайно удаляют электронное письмо.

Создание удобного интерфейса

Навигация всегда должно быть ясным и самоочевидным.Пользователи должны иметь возможность получать удовольствие изучение интерфейса любого программного продукта. Даже сложные продукты B2B полны функций не должны пугать пользователей, чтобы они боялись нажимать кнопка. Хороший интерфейс помещает пользователей в их комфорт зоне, предоставив некоторый контекст того, где они, где они были и где они могут пойти дальше:

Обеспечить визуальные подсказки . Визуальные подсказки служат напоминанием для пользователей. Позвольте пользователям легко перемещаться по интерфейсу, предоставляя ориентиры при перемещении по интерфейсу продукта.Заголовки страниц, выделение выбранных в данный момент параметров навигации и другие наглядные пособия позволяют пользователям сразу увидеть, где они находятся в интерфейсе. Пользователь никогда не должен задаваться вопросом: «Где я?» или «Как я попал на этот экран?»
Предсказуемость . Пользователям должны быть предоставлены подсказки, которые помогут им предсказать результат действия. Пользователь никогда не должен задаваться вопросом: «Что мне нужно нажать, чтобы выполнить свою задачу?» или «Для чего эта кнопка?»

Четкий и наглядный рабочий процесс способствует завершению задачи.
Изображение предоставлено Designmodo.

Обеспечьте информативную обратную связь — будьте признательны

Обратная связь обычно ассоциируется с точками действия — для каждого действия пользователя система должна показывать осмысленную и четкую реакцию. Система с обратной связью для каждое действие помогает пользователям без проблем достигать своих целей.

Дизайн пользовательского интерфейса должен учитывать характер взаимодействия. Для частых действий ответ может быть скромный. Например, когда пользователи взаимодействуют с интерактивным объектом (таким как кнопку), важно указать, что действие было признал.Это может быть что-то простое, например, кнопка, меняющая цвет, когда нажата (изменение уведомляет пользователя о взаимодействии). Отсутствие таких обратная связь заставляет пользователей дважды проверять, были ли их предполагаемые действия выполненный.

Обратная связь подтверждает, что действие выполнено успешно.
GIF от Колина Гарвена.

Для нечастые и значимые действия, реакция должна быть более существенной. Например, при заполнении поля пароля в форме регистрации хороший пользовательский интерфейс может информировать пользователей о требования к их паролю.

Пользователь видит зеленую галочку, когда требование пароля удовлетворено.
GIF от Эммануэля Торреса

Показать статус системы

Пользователи гораздо снисходительнее, когда у них есть информация о том, что происходит, и получают периодическую обратную связь о статусе процесса. Видимость статус системы важен, когда пользователи инициируют действие, которое занимает некоторое время для компа в комплекте. Пользователи не любят, когда их ничего не видят в экран устройства, в то время как приложение должно что-то делать.Использование индикаторы прогресса — один из тонких аспектов дизайна пользовательского интерфейса, оказывающий огромное влияние на комфорт и удовольствие пользователей.

Хороший интерфейс может утешить пользователей, показывая прогресс, пока система выполняет задачу. Dropbox показывает статус загрузки документа: текущий прогресс и количество оставшегося времени.

Подходит для пользователей с разным уровнем квалификации

Пользователи с разными уровнями навыков должны иметь возможность взаимодействовать с продуктом на разные уровни.Не жертвуйте опытными пользователями ради простого в использовании интерфейса для новички или случайные пользователи. Вместо этого попробуйте разработать дизайн для нужд разнообразного набора пользователей, поэтому не имеет значения, является ли ваш пользователь экспертом или новичком.

Добавление такие функции, как учебные пособия и объяснения, чрезвычайно полезны для начинающих пользователей (просто убедитесь, что опытные пользователи могут пропустить эту часть).

Один раз пользователи знакомы с продуктом, они будут искать ярлыки, чтобы ускорить часто используемые действия. Вы должны предоставить быстрые пути для опытных пользователей, позволяя им использовать ярлыки.

2. Сделайте так, чтобы пользователю было удобно взаимодействовать с продуктом

Удалите все элементы, которые не помогают вашим пользователям

Интерфейсы не должны содержать нерелевантную или редко необходимую информацию. Нерелевантная информация приводит к появлению шума в пользовательском интерфейсе — она конкурирует с релевантной информации и снижает ее относительную видимость. Упрощать интерфейсов путем удаления ненужных элементов или содержимого, которое напрямую не поддержка пользовательских задач. Стремитесь к дизайну UI таким образом, чтобы вся информация, представленная на экране, была ценной и соответствующие.Изучите каждый элемент и оцените его на основе ценности, которую он приносит пользователям.

Хорошим примером приложения, которое следует подходу «меньше значит больше», избегая перегрузки интерфейса контентом или функциями, является iA Writer.

Изображение от iA Writer

Интерфейс приложения iA Writer представляет собой чистый лист для набора текста без отвлекающих факторов. Это позволяет пользователям сосредоточиться на том, что они пишут, и скрывает все остальное.

Не запрашивать у пользователей данные, которые они уже ввели

Не запрашивать заставляют пользователей повторять ранее введенные данные.Пользователи легко раздражены утомительными последовательностями ввода данных, особенно когда они предоставили все необходимая информация раньше. Хороший интерфейс работает максимум работы при минимальном количестве информации от пользователей.

Избегайте жаргона и системных терминов

Когда при разработке продукта важно использовать язык, который легко читать и понимать. Система должна говорить на языке пользователя словами, фразами, и концепции, знакомые пользователю, а не жаргонные или системные термины.

Используйте повседневный язык, а не язык систем или разработчика.
Изображение от Think With Google

Применение закона Фиттса к интерактивным элементам

Фиттса Закон гласит, что время нахождения цели зависит от расстояния. к и размер цели. Это означает, что лучше разрабатывать большие цели. для важных функций (с большими кнопками легче работать).

D — расстояние от начальной точки курсора; W — ширина цели (закон Фиттса). Изображение от Apple

Также важно помнить, что время, необходимое для обнаружения нескольких целей, складывается из времени, необходимого для обнаружения каждой.Таким образом, при работе над дизайном пользовательского интерфейса, чтобы повысить эффективность взаимодействия, старайтесь не только уменьшать расстояния и увеличивать размеры целей, но также уменьшать общее количество целей, с которыми пользователи должны взаимодействовать для выполнения данной задачи.

Конструкция доступных интерфейсов

Когда мы разрабатываем продукты, важно помнить, что хорошо разработанный продукт доступны для пользователей с любым уровнем способностей, в том числе для слабовидящих, слепота, нарушение слуха, когнитивные или двигательные нарушения.Хороший пользовательский интерфейс — это доступный пользовательский интерфейс, потому что он улучшает ваш доступность продукта повышает удобство использования для всех групп пользователей.

Цвет — один из элементов дизайна, который сильно влияет на доступность. Люди по-разному воспринимают цвет — некоторые пользователи могут видеть полный диапазон цветов, но многие люди могут различать только ограниченный диапазон цветов. Примерно 10 процентов мужчин и один процент женщин страдают дальтонизмом в той или иной форме. При разработке интерфейсов лучше избегать использования цвета как единственного способа передачи информации.Каждый раз, когда вы хотите, чтобы цвет передавал информацию в интерфейсе, вы должны использовать другие подсказки, чтобы передать информацию тем, кто не видит цвета.

Использование метафор реального мира

Использование метафор в дизайне пользовательского интерфейса позволяет пользователям создавать связь между реальным миром и цифровым опытом. Метафоры реального мира расширяют возможности пользователей, позволяя им передавать существующие знания о том, как вещи должны выглядеть и работать. Метафоры часто используются, чтобы сделать незнакомое знакомым. Возьмем, к примеру, корзину на рабочем столе, в которой хранятся удаленные файлы — это не настоящая корзина для мусора, но она визуально представлена таким образом, чтобы вам было легче понять концепцию.

Хорошие метафоры создают сильную связь с прошлым опытом из реального мира в умах пользователей. Рециркуляция Значок корзины на Mac похож на фактическую корзину, и он показывает, есть ли в ней файлы в этом.

При выборе метафоры для пользовательского интерфейса выберите ту, которая позволит пользователям уловить мельчайшие детали концептуальной модели. Например, запрашивая данные кредитной карты для обработки платежа, вы можете сослаться на реальную физическую карту в качестве примера.

Изображение Рамакриша

Инженер для ошибок

Ошибки возникают случайно на пути пользователя.Плохая обработка ошибок в сочетании с бесполезными сообщениями об ошибках может вызвать у пользователей разочарование и заставить их отказаться от вашего приложения. С другой стороны, хорошо составленное сообщение об ошибке может превратить момент разочарования в момент обращения. Эффективное сообщение об ошибке — это комбинация явного уведомления об ошибке и подсказок по решению проблемы.

Хороший интерфейс содержит точные, вежливые и конструктивные сообщения об ошибках.

Четный лучше, чем писать хорошие сообщения об ошибках, — это иметь дизайн пользовательского интерфейса, который предотвращает возникновение проблемы в первую очередь.Попробуйте либо устранить условия, подверженные ошибкам, либо проверить наличие их и представить пользователям диалоговое окно подтверждения, прежде чем они примут действие. Например, Gmail предлагает вам, если вы забыли вставить вложение.

Лучшие проекты имеют отличную погрешность восстановления, пытаясь помешать пользователям совершать эти ошибки в первую очередь место. Функция предотвращения ошибок в Gmail показывает всплывающее окно, если пользователи забывают вставить вложение после ссылки.

Защитить работу пользователя

Обеспечить чтобы пользователи никогда не теряли свою работу.Пользователи не должны потерять свою работу в результате ошибки на их стороне (т. е. случайно обновить веб-страницу с помощью формы, вводимой пользователем), системная ошибка, проблемы с подключением к Интернету или по любой другой причине, кроме тех, которые совершенно неизбежны, как неожиданная потеря мощности.

3. Снизить когнитивную нагрузку

Когнитивная нагрузка — это количество умственной вычислительной мощности, необходимое для использования продукта. Его Лучше не заставлять пользователей слишком много думать / работать, чтобы использовать ваш продукт.

Разделение на части для последовательностей информации или действий

In В 1956 году психолог Джордж Миллер познакомил мир с теорией дробление. В своих работах Миллер говорит, что рабочая память человека может справиться с семь плюс-минус два «фрагмента» информации, пока мы обрабатываем Информация.

Это правило можно использовать при организации и группировке элементов вместе. Например, если ваш пользовательский интерфейс заставляет пользователей вводить телефонные номера без обычного пробела, это может приводит к появлению большого количества неправильно записанных телефонных номеров.Обычно люди не могут сканировать кластеры из десяти или более цифр для обнаружения ошибок. Именно поэтому телефонные номера разбиты на более мелкие части.

Проще сканировать и вводить фрагменты чисел, а не целые числа.

Уменьшить количество действий, необходимых для выполнения задачи

Когда проектируя пользовательский интерфейс, стремимся сократить общее количество действий требуется от пользователя для достижения цели. Не стоит забывать о трехкнопочном кнопке . правило , согласно которому пользователь продукта должен иметь возможность найти любой информация с помощью не более трех щелчков мышью.

Признание превыше отзыва

Один из 10 эвристик юзабилити Якоба Нильсена советует ставить распознавание , а не отзыв в дизайне пользовательского интерфейса. Признавая что-то намного проще, чем вспомнить его, потому что распознавание включает в себя больше сигналов в нашем мозг (сигналы распространяют активацию на связанную информацию в памяти, и эти сигналы помогите нам запомнить информацию).

Дизайнеры может способствовать узнаваемости в пользовательских интерфейсах, создавая информацию и функциональность наглядна и легко доступна.Наглядные подсказки, такие как всплывающие подсказки и контекстно-зависимые детали также помогают пользователям распознавать информацию.

Изображение предоставлено Google Hangouts

Повышение четкости изображения

Хорошо визуальная организация улучшает удобство использования и разборчивость, позволяя пользователям быстро найти нужную информацию и больше пользоваться интерфейсом эффективно.

При разработке макетов:

Избегайте одновременного вывода на экран слишком большого количества информации. Создайте дизайн системы сетки, чтобы избежать визуального беспорядка.
Помните принцип «форма следует за функцией». Сделайте так, чтобы вещи выглядели так, как будто они работают.
Применяйте общие принципы организации контента, такие как группирование похожих элементов вместе, нумерация элементов и использование заголовков и текста подсказки.

4. Обеспечение согласованности пользовательских интерфейсов

Согласованность — важное свойство хорошего пользовательского интерфейса: согласованный дизайн — это интуитивно понятный дизайн. Последовательность — один из самых важных факторов, способствующих удобству использования и обучаемости. Основная идея согласованности — это идея передаваемых знаний — позволить пользователям передавать свои знания и навыки из одной части пользовательского интерфейса приложения в другую, а также из одного приложения в другое.

Визуальная согласованность (стиль)

Пользователи никогда не должны сомневаться в целостности продукта. Во всем продукте должны присутствовать одни и те же цвета, шрифты и значки. Обязательно обращайтесь к своему менеджеру дизайн-системы, чтобы убедиться, что вы не меняете визуальные стили в своем продукте без видимых причин. Например, кнопка «Отправить» на одной странице вашего сайта должна выглядеть так же, как и на любой другой странице.

Избегайте использования разных стилей для элементов на разных страницах сайта.Пользователи не должны задаваться вопросом, есть ли преобразованная кнопка, как в этом примере, означает то же самое.

Функциональная согласованность (поведение)

Согласованность поведения означает, что объект должен работать одинаково во всем интерфейсе. Поведение элементов управления интерфейса, таких как кнопки и пункты меню, не должно изменяться внутри продукта. Пользователи не хотят сюрпризов или изменений в привычном поведении — они легко расстраиваются, когда что-то не работает. Это может помешать обучению и не дать пользователям почувствовать уверенность в согласованности интерфейса.Не вводите пользователя в заблуждение — сохраняйте последовательность действий, следуя «принципу наименьшего удивления», чтобы интерфейс вел себя так, как ожидают пользователи.

Соответствует ожиданиям пользователей

Персонал имеют определенные ожидания относительно приложений / веб-сайтов, которые они используют. Разработка вашего продукт, противоречащий ожиданиям пользователя, является одним из худших вещи, которые вы можете сделать с пользователем. Неважно, какой логический аргумент вы предусмотреть, как что-то должно работать или выглядеть. Если пользователи ожидают, что это сработает / посмотрите с другой стороны, вам будет сложно изменить эти ожидания.Если твой подход не дает явных преимуществ, следуйте тому, что ожидают ваши пользователи.

Следуйте соглашениям платформы . Ваш продукт должен соответствовать стандартам, продиктованным руководящими принципами платформы. Рекомендации гарантируют, что ваши пользователи смогут понять отдельные элементы интерфейса в вашем дизайне.
Не изобретайте выкройки заново . Для большинства дизайнерских проблем уже существуют подходящие решения. Эти решения называются шаблонами. Популярные шаблоны становятся условностями, и большинство пользователей с ними знакомо.Игнорирование этого решения и продолжение разработки собственного решения может создать проблемы для пользователей. В большинстве случаев нарушение правил проектирования приводит к разочарованию пользователей — вы столкнетесь с проблемами юзабилити не обязательно потому, что ваше решение будет неправильным, а потому, что пользователи не будут с ним знакомы.
Не пытайтесь заново изобретать терминологию . Избегайте использования новых терминов, когда есть слова, которые пользователи уже знают. Пользователи проводят большую часть своего времени в других приложениях и на других сайтах, поэтому у них есть определенные ожидания в отношении именования.Использование разных слов может сбить их с толку.

Корзина — это привычная терминология; Торговый центр не является и может запутать интернет-покупателей.

Заключение

Задача дизайнеров пользовательского интерфейса сегодня — создавать удобные для пользователя интерфейсы: интерфейсы, которые поощряют исследование без опасения негативных последствий. Без сомнения, интерфейсы будущего будут более интуитивно понятными, заманчивыми, предсказуемыми и снисходительными, но большинство принципов дизайна пользовательского интерфейса, перечисленных в этой статье, несомненно, будут применимы и к ним.

6 ключевых принципов дизайна пользовательского интерфейса

Независимо от того, хотите ли вы улучшить дизайн своего продукта или новичок в этой области и хотите изучить основы дизайна пользовательского интерфейса, знание правил и принципов дизайна интерфейса является обязательным. .

Джонатан Видавски, генеральный директор Maze, объясняет: «Дизайн пользовательского интерфейса — это использование типографики, изображений и других элементов визуального дизайна для превращения базового интерфейса в нечто удобоваримое и удобное».

Успешный пользовательский интерфейс — это тот, с которым люди хотят взаимодействовать.Это не только эстетично, но и удобно для людей. В конце концов, хорошо продуманный пользовательский интерфейс может повысить коэффициент конверсии вашего сайта до 200%.

Итак, давайте обсудим золотые правила и ключевые принципы красивого, эффективного и простого в использовании дизайна пользовательского интерфейса.

1. Обеспечьте единообразие пользовательских интерфейсов

Майк Гилфиллан, технический ведущий разработчик Edge of the Web, говорит: «Согласованность является ключевым моментом: несколько цветов, шрифтов и стилей могут создавать путаницу, в то время как согласованность создает знакомство.”

Согласованный пользовательский интерфейс означает использование схожих шаблонов проектирования, идентичной терминологии в подсказках, однородных меню и экранов, а также согласованных команд во всем интерфейсе.

2. Разрешить пользователям легко перемещаться с помощью ярлыков

Опытным пользователям или пользователям, которые часто посещают ваш веб-сайт или регулярно пользуются вашим продуктом, нужны ярлыки для быстрого перемещения по интерфейсу.

Так же, как большинство пользователей Windows используют сочетание клавиш CTRL + C для быстрого копирования текста и CTRL + V для его вставки, вам необходимо упростить навигацию и управление пользовательскими интерфейсами с помощью ярлыков.

3. Обеспечьте информативную обратную связь

Обеспечьте обратную связь через читаемую копию пользовательского интерфейса для всех действий пользователя. Бен Шнейдерман объясняет: «Для частых и незначительных действий реакция может быть скромной, тогда как для нечастых и крупных действий реакция должна быть более существенной».

Например, когда пользователей просят создать пароль, ваш пользовательский интерфейс должен предлагать информацию о том, насколько надежным он должен быть, либо с помощью примера надежного пароля, либо с использованием символов, демонстрирующих, насколько надежен текущий пароль пользователя.

Прекрасным примером является форма подписки DropBox. Он показывает надежность пароля пользователя через гладкую полосу. Когда я добавил только свое имя в поле пароля, это сигнализировало о том, насколько слаб мой пароль через эту единственную панель.

Итак, я создал очень сложный пароль, состоящий из нескольких цифр и символов:

4. Диалоговое окно дизайна для закрытия

Согласно Шнейдерману, «Последовательности действий должны быть организованы в группы с началом, серединой и концом.Информативная обратная связь по завершении группы действий дает пользователям удовлетворение выполнением, чувство облегчения, сигнал, чтобы выбросить из головы планы действий на случай непредвиденных обстоятельств, и индикатор для подготовки к следующей группе действий ».

Отличный пример — выводить пользователей на страницу благодарности с резюме после того, как они завершили заказ, сообщая им, что он подтвержден.

5. Максимальное предотвращение ошибок

Сделайте пользовательский интерфейс максимально простым в использовании, предотвратив серьезные ошибки пользователя.
Итак, чтобы не отображать серые элементы меню, которые недоступны, и не позволять пользователям вводить буквы алфавита в поля, которые запрашивают номера телефонов, постарайтесь максимально предотвратить ошибки.

Здесь также появляется юзабилити-тестирование. Как дизайнеру, вы должны убедиться, что все работает, как задумано, путем тестирования дизайна с пользователями перед запуском. Это не только помогает проверить функциональность и удобство использования вашего продукта, но и помогает лучше понять потребности вашей целевой аудитории.

Однако иногда возникают ошибки. Поэтому, если пользователь допустил ошибку, обязательно предложите ему четкое объяснение, чтобы понять ошибку, и простое решение для ее устранения.

6. Предоставьте пользователям возможность легко изменить свои действия

Предложите пользователям простые и очевидные способы изменить их шаги, когда они сделали неправильный шаг.

Шнейдерман объясняет: «Эта функция снимает беспокойство, поскольку пользователи знают, что ошибки можно исправить, и побуждает исследовать незнакомые варианты.”

Допустим, кто-то случайно добавил неправильную информацию в многостраничную форму, позвольте ему вернуться на эту страницу и легко исправить свою ошибку, не начиная все заново.

7. Поддержка внутреннего локуса управления

«Опытные пользователи очень хотят ощущать, что они отвечают за интерфейс и что интерфейс реагирует на их действия. Они не хотят сюрпризов или изменений в привычном поведении, их раздражают утомительные последовательности ввода данных, трудности с получением необходимой информации и неспособность добиться желаемого результата », — говорит Шнейдерман.

Отличным примером того, как держать пользователей под контролем, является ситуация, когда кто-то собирается выйти из Microsoft Office и его система спрашивает, уверены ли они, что хотят выйти, не сохраняя свою работу. Это не только дает пользователю ощущение контроля, но также гарантирует, что в случае случайного выхода его работа не будет потеряна.

8. Минимизируйте нагрузку на память

Ключевым правилом для упрощения использования пользовательских интерфейсов является минимизация когнитивной нагрузки. Когнитивная нагрузка (или нагрузка на память) может снизить способность пользователя выполнять важные задачи, поэтому очень важно, чтобы компьютеры взяли на себя нагрузку на память в той мере, в какой они могут.

Например, не заставляйте пользователей повторно вводить личную информацию каждый раз, когда они делают покупки на вашем сайте, или добавлять свой адрес электронной почты и имя каждый раз, когда они заходят на ваш сайт.

При разработке всегда выбирайте распознавание, а не отзыв, чтобы пользователи могли выполнять свои задачи быстро и без проблем.

Итак, каковы ключевые принципы проектирования высокопроизводительного пользовательского интерфейса? Давайте посмотрим на них.

От распознавания интерактивных и статических элементов до интуитивной навигации — ясность является неотъемлемой частью хорошего дизайна пользовательского интерфейса.

Как метко сказал Пип Лаха: «Ваша задача — создать интерфейс, который сводит к минимуму разрыв в знаниях между тем, что пользователи знают до того, как они зайдут на ваш сайт, и тем, что они должны знать, чтобы использовать его должным образом».

Итак, при создании продукта задайте себе следующие вопросы:

Насколько интуитивно понятна ваша навигация? Поощряются ли пользователи переходить с одной страницы на другую с легкостью?
Использовали ли вы хорошо заметные кнопки, побуждающие пользователей нажимать на них?
Является ли назначение каждого элемента вашего продукта, веб-сайта или приложения ясным и легким для понимания?

У вас есть всего восемь секунд, чтобы привлечь внимание пользователя, поэтому убедитесь, что вы не тратите эти секунды, создавая неразбериху и хаос.

Вы автоматически ищете меню в верхней части главной страницы нового веб-сайта?

Почему? Потому что это то место, где мы воспринимаем меню.

Лучшие интерфейсы знакомы пользователям.

Удобство использования, то есть то, насколько легко пользователь взаимодействует с продуктом или веб-сайтом, тесно связано со степенью знакомства. Пользователи зависят от элементов и интерфейсов, действующих привычным для их цифрового опыта образом.

Закон Джейкоба гласит: «Пользователи проводят большую часть своего времени на других сайтах.Это означает, что пользователи предпочитают, чтобы ваш сайт работал так же, как и все другие уже известные им сайты ».

Вы должны не только использовать установленные принципы и правила дизайна пользовательского интерфейса (например, описанные выше золотые правила дизайна пользовательского интерфейса Бена Шнейдермана), чтобы сделать свой дизайн более привычным, но и обеспечить синхронизацию всех элементов во всем интерфейсе.

Есть несколько преимуществ включения в ваш продукт принципа знакомства дизайна пользовательского интерфейса:

Чем больше пользователь знаком с вашим интерфейсом и с большей легкостью он сможет использовать ваш веб-сайт или приложение, тем чаще они будут к нему возвращаться.

И поскольку исследования показывают, что привлечение нового клиента обходится в 6-7 раз дороже, чем удержание старого, жизненно важно, чтобы вы создавали удобное взаимодействие с пользователем, используя знакомство.

Дизайнерам пользовательского интерфейса проще использовать проверенные и проверенные решения по дизайну интерфейса, чем создавать новые с нуля.

Сокращает время обучения для пользователей

Чем меньше времени посетители тратят на понимание того, как работает пользовательский интерфейс, тем быстрее они могут начать использовать ваш продукт или услугу.

Это также снижает вероятность того, что они покинут ваш веб-сайт и перейдут на следующий веб-сайт, потому что у вас была крутая кривая обучения.

Предоставьте пользователям возможность управлять интерфейсом. Якоб Нильсен объясняет, почему это важно: «Пользователи часто выбирают системные функции по ошибке, и им потребуется четко обозначенный« аварийный выход », чтобы выйти из нежелательного состояния без необходимости проходить расширенный диалог. Поддержка отмены и повтора ».

По сути, это означает предоставление пользователям различных возможностей вернуться на шаг назад, когда они чувствуют, что совершили ошибку.Это тесно связано с золотым правилом дизайна пользовательского интерфейса Бена Шнейдермана: «Поддержка внутреннего локуса контроля» и «Разрешение пользователям легко менять свои действия».

Например, каждый раз, когда вы создаете формы, разрешите пользователям нажимать кнопку и возвращаться на страницу, на которой они были в последний раз. Не возвращайте их полностью на главную страницу или в начало формы.

Аналогичным образом при использовании оверлеев на своем веб-сайте убедитесь, что кнопка выхода {x} не отображается. В противном случае пользователи могут нажать кнопку «Назад» в браузере и вернуться на два шага назад вместо того, чтобы просто выйти из оверлея.

Посмотрите, насколько четкая и заметная здесь маленькая кнопка x.

Но можно ли найти кнопку выхода на этом экране?

Сильная визуальная иерархия — это ключевой принцип успешного пользовательского интерфейса. Он состоит из компоновки визуальных элементов таким образом, чтобы объяснить уровень важности каждого элемента и направить пользователя к желаемому действию. Ваша задача как дизайнера — организовать элементы дизайна пользовательского интерфейса таким образом, чтобы пользователям было проще ориентироваться в вашем продукте.

Как говорит Паскаль Потвин, руководитель отдела дизайна в IBM, «[…] визуальная иерархия устанавливает порядок важности для визуальных элементов, чтобы направлять внимание пользователя и упростить использование информации».

Это гарантирует, что пользователи сначала видят самую важную информацию, затем следующую и т. Д., И устанавливается с помощью различных элементов. Вот некоторые из них:

Первый и один из самых важных элементов создания визуальной иерархии — это цвет. Яркие цвета выделяются больше всего и могут использоваться в приглушенных цветовых схемах, чтобы побудить пользователей выполнить определенное действие.

Размер имеет большое значение в дизайне пользовательского интерфейса, особенно при создании визуальной иерархии. Чем больше элемент, тем он заметнее. Меньшие элементы обычно имеют меньшее значение. Итак, как дизайнер, старайтесь делать важные вещи (например, заголовки или CTA) крупнее и смелее.

Поэкспериментируйте с разными размерами, толщиной и стилями шрифтов, чтобы установить визуальную иерархию. Это именно то, что здесь делает Odoo.

Обратите внимание, что основной заголовок, который точно объясняет, о чем идет речь, имеет самый большой размер шрифта, а два основных слова («реальный» и «CRM») выделены жирным шрифтом, чтобы подчеркнуть суть сообщения.

И хотя CTA имеет меньший размер шрифта, он выделен цветным прямоугольником, чтобы аудитория обратила на него внимание сразу после прочтения заголовка.

Дайте вашим элементам немного передышки — не тесните все объекты и элементы вместе на экране. Негативное пространство выделяет важные элементы. Swaggar эффективно использует отрицательное пространство на главной странице своего веб-сайта.

Как советует Ник Кампурис, User Experience & User Interface Designer: «Социальное дистанцирование ваших элементов, текстовых блоков и всего на вашем чертовом экране.Космос — друг каждого. Используйте закон близости, чтобы помочь пользователям визуально перемещаться по вашим страницам. Это такая же часть вашего дизайна, как и все остальное, поэтому обратите внимание на пробелы ».

«Гибкость — это не просто линейный путь, она заключается в знании своих клиентов и обеспечении гибкости в зависимости от их намерений», — объясняет Брук Коулинг, соучредитель и директор по маркетингу Digital of Things.

Итак, от разработки решений, которые отлично работают в любых ситуациях (от старого компьютера вашего дедушки до новейшего iPad вашего сына), до использования ярлыков, ускоряющих взаимодействие для пользователей, гибкость является ключевым принципом дизайна пользовательского интерфейса.

Вам необходимо не только сделать свой пользовательский интерфейс доступным для изучения для новых пользователей, но он также должен иметь ускорители, которые помогут опытным пользователям ускорить свои процессы. От новичков до экспертов — убедитесь, что ваш продукт гибкий и эффективный для всех категорий пользователей.

Некоторые примеры гибкого дизайна пользовательского интерфейса включают:

Ярлыки для выполнения часто используемых шагов одним щелчком мыши
Расширенные функции поиска
Включение полос фильтров

Мультимодальный пользовательский интерфейс позволяет пользователям взаимодействовать с системой через несколько режимы, такие как речь, касание текста, зрение.Как дизайнер, вы должны помнить обо всех этих режимах. Кроме того, при разработке пользовательского интерфейса помните, что ваша аудитория может использовать его через мобильный телефон, планшет, ноутбук или старый ржавый компьютер.

«Многие пользователи в основном или полностью зависят от мобильного доступа; оптимизировать пользовательский интерфейс с учетом сильных сторон каждого устройства. Помните, что опыт пользователей может охватывать разные устройства и режимы взаимодействия (телефон, электронная почта, мобильное устройство, настольный компьютер, личное) — создавайте опыт в этих режимах, чтобы удовлетворить их потребности », — делится Джон Фукуда, соучредитель и директор в Лимина, лидер индустрии дизайна и UX.

Создание вашего веб-сайта для всех пользователей имеет важное значение. По данным ВОЗ, около 285 миллионов человек страдают нарушениями зрения, от 110 до 190 миллионов взрослых имеют серьезные трудности с передвижением, а 360 миллионов человек во всем мире страдают потерей слуха.

Джесси Хауслер, главный специалист по доступности в Salesforce, пишет: «Доступность не заставит вас делать уродливый, скучный или загроможденный продукт. Он представит набор ограничений, которые нужно учитывать при рассмотрении вашего дизайна.”

При разработке продуктов и веб-сайтов убедитесь, что вы соответствуете требованиям WCAG (Руководство по обеспечению доступности веб-контента).

Вот несколько простых способов реализовать принцип доступности при разработке продуктов:

Используйте средство проверки цветового контраста WebAim для создания сильных цветовых контрастов
Убедитесь, что все ваши изображения имеют соответствующие атрибуты alt
Спросите себя, могут ли пользователи легко перемещаться по вашему веб-сайт с помощью клавиши табуляции на клавиатуре

Итак, работая над следующим проектом по дизайну пользовательского интерфейса, помните обо всех этих правилах и принципах дизайна пользовательского интерфейса, и вы в конечном итоге создадите продукт, который не только красив, но и удобен для пользователя. .

И не забывайте постоянно тестировать свои проекты с помощью Maze, чтобы повторять итерации по мере прохождения процесса и уверенно запускать. Получение отзывов пользователей о вашем продукте до его запуска гарантирует, что он будет максимально удобным для пользователя.

Дизайн пользовательского интерфейса: 4 правила, которые необходимо знать

Вспомните последний замечательный веб-сайт, который вы открыли. А теперь подумайте, почему это было здорово. Вряд ли вы думаете об содержащихся в нем удивительных изображениях (хотя они, вероятно, помогли) или информативном тексте, который вы там прочитали (хотя это, вероятно, тоже помогло).Нет: гораздо более вероятно, что веб-сайт произвел на вас впечатление, потому что вы сделали что-то быстро, эффективно и результативно. Один из ключевых подходов к достижению этого известен как дизайн пользовательского интерфейса (или для краткости дизайн пользовательского интерфейса).

Дизайн пользовательского интерфейса

важен, потому что он управляет взаимодействием интернет-пользователя с вашим веб-сайтом и, следовательно, с вашим продуктом или услугой. Лучший пользовательский интерфейс позволяет пользователю забыть о технических тонкостях вашего веб-сайта и просто продолжить выполнение задачи, которую он хочет решить.Хотя это может показаться основным принципом веб-дизайна, процесс проектирования страниц и проектирования интерфейсов весьма различен, и есть существенные различия между UX, UI, веб-дизайном и веб-разработкой. В этой статье мы определим, что такое дизайн пользовательского интерфейса, что составляет хороший дизайн пользовательского интерфейса, и четыре правила, которые помогут вам создать хороший дизайн пользовательского интерфейса.

Что такое дизайн пользовательского интерфейса?

–

Дизайн пользовательского интерфейса — это эстетический вид цифровых интерфейсов, в частности, визуальные точки касания, такие как кнопки, меню навигации, значки и типографика.Основное внимание уделяется внешнему виду и ощущениям от интерфейса, а также тому, будут ли у пользователей плавные и приятные впечатления как от использования, так и от внешнего вида. Короче говоря, дизайн пользовательского интерфейса — это процесс, в котором дизайнеры и разработчики создают удобные интерфейсы, которые связывают ваших клиентов с вашим продуктом или услугой.

Иллюстрация OrangeCrush

Наиболее распространенные формы дизайна пользовательского интерфейса:

Графические пользовательские интерфейсы — это визуальные представления кнопок, меню или панелей управления, по сути всего, с чем пользователь будет взаимодействовать.Примером этого является рабочий стол вашего компьютера или интерфейс мобильного телефона.
Голосовые интерфейсы — это, как говорится, интерфейсы, требующие голоса для инициирования действия. В наши дни они становятся все более популярными. Некоторые примеры — Siri от Apple, Alexa от Amazon или Bixby от Google.
Интерфейсы на основе жестов — это интерфейсы, в которых жесты пользователя влияют на действие продукта. Примером этого могут быть игры виртуальной реальности.

Каждый из этих режимов проектирования налагает на дизайнера свой набор ограничений, и каждый должен быть тщательно изучен, чтобы пользователи могли получить максимально удобную работу.

Как вы определяете хороший дизайн пользовательского интерфейса?

–

Как и в любом процессе проектирования, ключом к созданию хорошего дизайна пользовательского интерфейса является тщательное обдумывание того, чего вы хотите достичь. Часто бывает проще определить тип веб-сайта или приложения, которые вы хотите создать, чем определить набор правил для их достижения.

By 84 Design

На самом деле, определить характеристики хорошего дизайна пользовательского интерфейса относительно просто. Вот некоторые из них, имейте в виду:

Доставляет удовольствие пользователям, а также дает им возможность быстро и легко выполнять необходимые задачи.
Он учитывает разнообразные потребности разных пользователей, другими словами, доступен.
Интерфейс простой и эстетичный, но не перегруженный и не отвлекающий. Пользователи должны видеть, как легко решить конкретную задачу.
Основное внимание уделяется вашему продукту или услуге и служит мостом для доступа клиента к ним.
Он позволяет людям перемещаться и взаимодействовать по своему усмотрению, но готов вмешаться и помочь или предложить помощь, если это необходимо.

Когда все эти элементы объединены, вы получите дизайн пользовательского интерфейса, одновременно простой и мощный: такой, который позволяет пользователям быстро достигать того, чего они хотят, и без поиска на нескольких страницах необходимой информации.

Важные правила хорошего дизайна пользовательского интерфейса

—

Теперь давайте немного выйдем за рамки основного определения хорошего дизайна пользовательского интерфейса и начнем рассматривать правила и методы, которые можно использовать для этого. Хотя каждый веб-сайт и приложение уникальны, есть основной набор функций, который разделяет почти каждый отличный дизайн пользовательского интерфейса. Итак, давайте рассмотрим их один за другим.

1. Хороший дизайн пользовательского интерфейса соответствует всему вашему веб-сайту

Пожалуй, самый важный элемент хорошего дизайна пользовательского интерфейса — это согласованность.В идеале каждый элемент вашего сайта должен указывать вашему пользователю, где именно он находится, хотя и не мешать им пользоваться вашим сайтом. Это означает, что одним из первых шагов в разработке качественного веб-сайта является разработка руководящих принципов бренда для текстов и цветовых схем, чтобы ваш пользователь никогда не задавался вопросом, находятся ли они по-прежнему на том же веб-сайте.

Подобную цветовую схему и схему брендинга можно также использовать, чтобы указать пользователям, как использовать ваш веб-сайт. Цвета могут помочь пользователям распознать важные функции вашего веб-сайта.Например, кнопка «запросить дополнительную информацию» должна выглядеть аналогично кнопке «запросить демонстрацию», чтобы пользователи могли легко находить похожие действия, которые они ищут, просто быстро просканировав веб-сайт.

Кнопки с призывом к действию «Применить» и «Начать работу» выглядят одинаково с разным текстом. Но это по-прежнему позволяет пользователю понять, что они оба выполняют одну и ту же задачу. Автор masiko

Создание разных цветов, кнопок и шрифтов для каждого действия на вашем веб-сайте затрудняет пользователям, у которых ограничено время, быстрый поиск ссылки, которую они ищут.Точно так же создание кнопки с одинаковым шрифтом, размером и цветом для двух совершенно разных действий может вызвать путаницу. Например, вы никогда не захотите, чтобы обе кнопки «отменить» и «отправить» были одного цвета.

2. Хороший дизайн пользовательского интерфейса позволяет избежать чрезмерной работы пользователя

—

Лучшие веб-сайты упрощают выполнение сложных задач для пользователя, и вы можете добиться этого, удалив с них как можно больше работы. Лучшие веб-сайты с пользовательским интерфейсом используют для этого самые разные методы, от упрощения чтения текста до более сложного процесса структурирования контента и страниц для максимальной эффективности.Чтобы приступить к сокращению нагрузки на пользователя, примите во внимание следующее:

Визуальная четкость

Здесь вы размещаете элементы на своей веб-странице, чтобы показать, насколько они важны. Например, более крупные и красочные кнопки или ссылки привлекают чье-то внимание и, таким образом, служат индикатором того, что они более важны.

Еще один совет — предоставить пользователю множество визуальных подсказок. Вы можете предоставить наглядные пособия и ориентиры, которые помогут пользователям ориентироваться в вашем интерфейсе.Идея состоит в том, чтобы сделать навигацию по вашему сайту максимально предсказуемой. Вы никогда не хотите, чтобы посетитель задавался вопросом, для чего предназначена кнопка или ссылка или где они находятся.

Баланс текста и изображений

Еще один важный совет — уменьшить количество текста на вашем веб-сайте. Посетители веб-сайта уже уделяют мало внимания, и принуждение их к чтению длинных блоков текста не облегчит им задачу. Пользователи должны иметь возможность просматривать и легко определять разделы и информацию, которые им нужно найти.

Дэвид Ферретти

Простой процесс

Большинство функций вашего веб-сайта, будь то регистрация, покупка или запрос дополнительной информации, должны соответствовать правилу трех кликов. Как бы то ни было, вы хотите, чтобы ваш пользователь мог достичь цели не более чем за три щелчка мышью.

3. Хороший дизайн пользовательского интерфейса дает пользователям полный контроль

—

Великолепный дизайн пользовательского интерфейса позволяет пользователям легко перемещаться по вашему веб-сайту так, как они хотят, расширяя их возможности и внушая чувство контроля.Вы должны убедиться, что ваш веб-сайт работает для ваших пользователей, а не заставлять их изучать сложный пользовательский интерфейс, чтобы получить доступ к вашим услугам.

Есть несколько способов сделать это, и вот наиболее часто встречающиеся из них:

Включите какое-то главное меню или якорь со ссылками на часто используемые страницы, чтобы они могли легко перемещаться по вашему веб-сайту.
Сделайте так, чтобы посетители веб-сайта могли легко вернуться на ранее посещенную страницу. Это не только упрощает использование вашего веб-сайта, но также побуждает пользователей исследовать ваш веб-сайт и позволяет им контролировать свое путешествие.
Подтвердить или предоставить обратную связь, когда определенное действие завершено или результат действия. Например, создавая пароль, сообщите пользователю, что соответствует требованиям, а что отсутствует.

Автор tikshow

Предоставлять обновления состояния системы в режиме реального времени, чтобы предотвратить нетерпение пользователей (то есть, когда запрос в интерфейсе завершен, пользователи могут видеть обновление статуса в виде линейного индикатора выполнения, который перемещается через «обработку». , »« Доставка »,« загрузка »и т. Д.).
Обеспечьте визуальные и текстовые надписи. Дайте понять, какая вкладка предназначена для какого действия, используя общие символы, а также четкие метки.
Включите автосохранение, чтобы пользователи не потеряли свою предыдущую работу при ошибочном нажатии кнопки.
Если углубиться в ту же тему, сообщения об ошибках должны быть тщательно обработаны, чтобы не вызывать разочарования. Сообщения об ошибках должны включать ссылки на страницы, которые могут быть полезны для решения возникшей проблемы, например ссылку для сброса пароля.

By Allure

4. Хороший дизайн пользовательского интерфейса делает пользователя комфортным

—

Хороший дизайн пользовательского интерфейса позволяет каждому пользователю чувствовать себя комфортно и дает каждому посетителю возможность достичь желаемого результата. Это означает обеспечение того, чтобы все посетители вашего сайта чувствовали себя комфортно и уверенно на вашем сайте. Вот несколько способов сделать это:

Избегайте жаргона

Не используйте язык, который ваша аудитория не поймет. Подумайте о своей аудитории и используйте термины и язык, которые они знают и используют.Например, некоторые люди, работающие в швейной промышленности, могут называть предложение «купи один — получишь…» как BOGO, но размещение «BOGO бесплатно» на вашем веб-сайте для продвижения предложения не будет иметь смысла для многих посетителей. И это может сбить с толку и отпугнуть клиентов от вашего сайта.

Включительно

Иллюстрация OrangeCrush

Имейте в виду, что у пользователей вашего веб-сайта может быть множество различий, таких как слабое зрение, нарушение слуха, когнитивные или двигательные нарушения.Убедившись, что ваш веб-сайт может обслуживать разнообразное население, вы обеспечите включение всех желающих. Помните об этом при разработке пользовательского интерфейса.

Это может означать использование простых высококонтрастных дизайнов везде, где это возможно, и снижение визуального шума до минимума. Избегайте ненужной графики или ссылок на страницы, которые не полностью соответствуют тому, что предлагает ваш продукт или услуга.

Ознакомьтесь с нашим руководством по инклюзивному дизайну >>

Как только вы начнете рассматривать несколько отличных дизайнов пользовательского интерфейса, вы увидите, что ценность инклюзивности выходит далеко за рамки того, чтобы предложить менее способным пользователям удобство.Убедившись, что ваша страница или приложение нравится как можно большему количеству людей, вы получите дизайн, который будет намного проще, элегантнее и удобнее для всех.

Используйте подсказки, которые уже знакомы пользователям

Когда вы используете визуальные подсказки из физического мира в цифровом мире, пользователь уже знает значение. Просто взгляните на свой компьютер, и вы увидите папки, похожие на папку, и корзину, предназначенную для ваших файлов и документов. Пользователь уже понимает функцию папки и корзины и будет использовать ее таким же образом в цифровом пространстве.

Другой пример: многие пользователи знают, что для выхода из экрана им нужно щелкнуть «x» в правом верхнем углу (или слева, если вы пользователь ПК). Последнее, что вы хотели бы сделать, это создать всплывающее окно или экран, где эта функция находится в нижней части экрана. Это наверняка приведет пользователей в замешательство и даже потенциально разочарование.

Видите, как кнопка «Пропустить» находится там, где должна быть кнопка выхода «X»? Это сообщает пользователю, что функция выхода или выхода находится там, где пользователь ее ожидал.Автор: Brendox

Последнее слово о дизайне пользовательского интерфейса

—

В конечном итоге цель хорошего дизайна пользовательского интерфейса — сделать навигацию по веб-сайту или приложению простой и приятной для пользователей. Это побуждает пользователей изучать ваш продукт или услугу, не чувствуя, что это слишком сложно или что они не боятся неудачи.

Лучшие дизайны пользовательского интерфейса делают больше, это также способ продемонстрировать ваш бренд миру. Поскольку ваш веб-сайт — это лицо вашего бренда или продукта, вы должны проектировать его, думая о своих клиентах, и убедиться, что у них есть тот опыт, который вы хотите от них.Независимо от того, означает ли это самостоятельное изучение техник дизайна пользовательского интерфейса или найм дизайнера пользовательского интерфейса, ваша цель должна быть одной и той же — обеспечить удобство для всех.

Нужен веб-дизайн, соответствующий правилам дизайна пользовательского интерфейса?

Работайте с нашими талантливыми дизайнерами, чтобы это произошло.

В чем разница? [Руководство 2021]

UX и UI: два термина, которые часто используются как синонимы, но на самом деле означают очень разные вещи. Так в чем же разница?

Мы все слышали разговоры, прогулки по модным улицам мировых технологических столиц, дискуссии о прекрасном «UX» продукта или плохом «UI» веб-сайта.Это секретный язык, который вы никогда не услышите? Эти люди используют сленг только для того, чтобы выглядеть круто?

Ну, ладно, для последнего, наверное, да, а для остальных — решительное НЕТ. Если вы хотите узнать, что именно означают UX и UI и чем они отличаются, вы попали в нужное место. Ниже приводится разбивка того, что мы собираемся осветить в этой статье. Прочтите , узнайте, что вообще означают термины UX и UI , какая из двух областей дизайна лучше оплачивается и как стать дизайнером UX или дизайнером пользовательского интерфейса.

Что такое UX и UI в первую очередь?
В чем разница между UX и UI дизайном?
Как взаимодействуют UX-дизайн и UI-дизайн?
UX vs. UI-дизайн: какой карьерный путь подходит вам?
Почему я написал эту статью?
Подведение итогов и дальнейшее чтение

Вы также можете перейти к середине сообщения, чтобы посмотреть видео, в котором я рассказываю об этой статье и предоставляю дополнительную информацию о том, что на самом деле означает быть UX или UI-дизайнером, и какое из двух полей подойдет вам лучше всего.А если вы больше визуальный человек, ознакомьтесь с нашей инфографикой «UX vs. UI» в конце поста.

1. Что такое UX и UI в первую очередь?

Перво-наперво: что на самом деле означают UX и UI? Люди, которых вы подслушивали, на самом деле обсуждают две профессии, которые, несмотря на то, что существовали десятилетиями, а теоретически веками, определялись технологической индустрией как UX и UI-дизайн.

UX-дизайн означает «дизайн пользовательского интерфейса», а UI означает «дизайн пользовательского интерфейса».Оба элемента имеют решающее значение для продукта и работают в тесном взаимодействии. Но, несмотря на их профессиональные отношения, роли сами по себе совершенно разные и относятся к очень разным аспектам процесса разработки продукта и дисциплины проектирования.

Прежде чем мы рассмотрим ключевые различия между UX и UI, давайте сначала определим, что означает каждый термин в отдельности.

Что такое UX-дизайн?

Дизайн пользовательского опыта — это способ создания продуктов, ориентированный на человека.Дон Норман, ученый-когнитивист и соучредитель Nielsen Norman Group Design Consultancy, придумал термин «пользовательский опыт» в конце 1990-х годов. Вот как он это описывает:

«Пользовательский опыт охватывает все аспекты взаимодействия конечного пользователя с компанией, ее услугами и продуктами».

— Дон Норман, когнитивист и архитектор пользовательского опыта

Понятно, верно? Что ж, вы можете сразу заметить, что, несмотря на то, что я подразумевал во введении, это определение не имеет отношения к технологиям, не упоминает о цифровых технологиях и мало что говорит нам о том, чем на самом деле занимается UX-дизайнер.Но, как и во всех профессиях, невозможно описать процесс всего в нескольких словах.

Тем не менее, определение Дона Нормана говорит нам, что , независимо от его носителя , UX-дизайн охватывает все взаимодействия между потенциальным или активным клиентом и компанией. Как научный процесс его можно применить к чему угодно; уличные фонари, машины, стеллажи Икеа и тд.

Однако, несмотря на то, что он является научным термином, с самого начала он использовался почти полностью в цифровых областях; Одна из причин этого в том, что индустрия высоких технологий начала бурно развиваться примерно во время изобретения этого термина.

В этой статье вы можете узнать все об увлекательной истории UX-дизайна.

По сути, UX применим ко всему, что можно испытать — будь то веб-сайт, кофеварка или посещение супермаркета. Часть «пользовательский опыт» относится к взаимодействию между пользователем и продуктом или услугой. Пользовательский опыт design , таким образом, учитывает все различные элементы, которые формируют этот опыт.

UX-дизайнер думает о том, какие впечатления вызывают у пользователя чувства и насколько легко пользователю выполнять желаемые задачи.Они также наблюдают и проводят анализ задач, чтобы увидеть, как пользователи на самом деле выполняют задачи в пользовательском потоке.

Например: насколько легко оформить заказ при совершении покупок в Интернете? Насколько легко тебе держать овощечистку в руке? Облегчает ли ваше приложение онлайн-банкинга управление своими деньгами?

Конечная цель UX-дизайна — создать легкий, эффективный, актуальный и всесторонний приятный опыт для пользователя.

Мы ответим на вопрос «Чем занимается UX дизайнер?» в четвертом разделе.А пока вот что вам нужно знать о UX-дизайне в двух словах:

Дизайн взаимодействия с пользователем — это процесс разработки и повышения качества взаимодействия между пользователем и всеми аспектами компании.
Дизайн пользовательского опыта теоретически не является цифровой практикой (когнитивная наука), но используется и определяется преимущественно цифровыми отраслями.
UX-дизайн — это НЕ визуальные эффекты; он фокусируется на общем ощущении от опыта.

Что такое дизайн пользовательского интерфейса (UI)?

Несмотря на то, что это более старая и более практичная область, вопрос « Что такое дизайн пользовательского интерфейса? »трудно ответить из-за большого разнообразия неверных толкований.В то время как пользовательский опыт представляет собой совокупность задач, направленных на оптимизацию продукта для эффективного и приятного использования, дизайн пользовательского интерфейса является его дополнением; внешний вид, презентация и интерактивность продукта.

Но, как и UX, его легко и часто сбивают с толку отрасли, в которых работают дизайнеры пользовательского интерфейса — до такой степени, что разные должности часто будут относиться к профессии как к совершенно разным вещам.

Если вы посмотрите объявления о вакансиях и описания вакансий для дизайнеров пользовательских интерфейсов, вы в основном найдете интерпретации профессии, которые сродни графическому дизайну, иногда распространяются также на дизайн брендов и даже разработку интерфейсов.

Если вы посмотрите на «экспертные» определения дизайна пользовательского интерфейса, вы в основном найдете описания, которые частично идентичны дизайну пользовательского интерфейса — даже со ссылкой на те же структурные методы.

Итак, какой из них правильный? Печальный ответ: ни то, ни другое.

Итак, давайте установим рекорд раз и навсегда. В отличие от UX, дизайн пользовательского интерфейса — это строго цифровой термин. Пользовательский интерфейс — это точка взаимодействия между пользователем и цифровым устройством или продуктом, например сенсорный экран на вашем смартфоне или сенсорная панель, которую вы используете для выбора того, какой кофе вы хотите из кофемашины.

Что касается веб-сайтов и приложений, дизайн пользовательского интерфейса учитывает внешний вид, удобство и интерактивность продукта. Все дело в том, чтобы пользовательский интерфейс продукта был как можно более интуитивным, а это означает тщательное рассмотрение каждого визуального интерактивного элемента, с которым может столкнуться пользователь.

Дизайнер пользовательского интерфейса будет думать о значках и кнопках, типографике и цветовых схемах, интервале, изображениях и адаптивном дизайне.

Как и дизайн пользовательского интерфейса, дизайн пользовательского интерфейса — это многогранная и сложная задача.Он отвечает за перенос разработки продукта, исследований, контента и макета в , чтобы он был привлекательным, ориентирующим и отзывчивым для пользователей.

В четвертом разделе мы рассмотрим процесс разработки пользовательского интерфейса и конкретные задачи, которые может ожидать дизайнер пользовательского интерфейса. Прежде чем мы рассмотрим основные различия между UX и UI, давайте кратко рассмотрим, что такое дизайн пользовательского интерфейса (UI):

Дизайн пользовательского интерфейса — это чисто цифровая практика. Он учитывает все визуальные интерактивные элементы интерфейса продукта, включая кнопки, значки, интервалы, типографику, цветовые схемы и адаптивный дизайн.
Цель дизайна пользовательского интерфейса — визуально направлять пользователя через интерфейс продукта. Все дело в создании интуитивно понятного интерфейса, который не требует от пользователя слишком много думать!
Дизайн пользовательского интерфейса переносит сильные стороны бренда и визуальные элементы в интерфейс продукта, делая дизайн последовательным, последовательным и эстетичным.

Теперь у нас есть четкое определение UX и UI, давайте рассмотрим ключевые различия между ними.

2.В чем разница между UX и UI дизайном?

Есть аналогия, которую я люблю использовать для описания различных частей (цифрового) продукта:

Если вы представляете продукт как человеческое тело, кости представляют собой код, который придает ему структуру. . Органы представляют собой UX-дизайн: измерение и оптимизация в сравнении с вводом для поддержки жизненных функций. Дизайн пользовательского интерфейса представляет собой косметику тела; его представление, его чувства и реакции.

Но не волнуйтесь, если вы все еще запутались! Ты не один!

По словам Рахула Варшни, соавтора Foster.fm:

«Пользовательский интерфейс (UX) и пользовательский интерфейс (UI) — одни из самых запутанных и неправильно используемых терминов в нашей области. Пользовательский интерфейс без UX подобен художнику, который, не задумываясь, наносит краску на холст; в то время как UX без пользовательского интерфейса похож на каркас скульптуры без папье-маше. Хорошее впечатление от продукта начинается с UX, за которым следует UI. Оба важны для успеха продукта.

Если у вас есть место для еще одной аналогии, Дейн Миллер прекрасно резюмирует взаимосвязь между UX и дизайном пользовательского интерфейса:

«Пользовательский интерфейс — это седло, стремена и поводья. UX — это ощущение, что вы можете ездить на лошади ».

— Дейн Миллер, веб-разработчик

Важно понимать, что UX и UI идут рука об руку; одно невозможно без другого. Однако вам не нужно обладать навыками проектирования пользовательского интерфейса, чтобы быть UX-дизайнером, и наоборот — UX и UI представляют собой отдельные роли с отдельными процессами и задачами!

Главное отличие, которое следует иметь в виду, заключается в следующем: UX-дизайн — это все, что связано с общими впечатлениями, в то время как UI-дизайн — это все, как интерфейсы продукта выглядят и функционируют.

UX-дизайнер рассматривает весь путь пользователя к решению конкретной проблемы; какие шаги они делают? Какие задачи им нужно выполнить? Насколько простой опыт?

Большая часть их работы сосредоточена на выяснении того, с какими проблемами и болевыми точками сталкиваются пользователи, и как определенный продукт может их решить. Они проведут обширное исследование пользователей, чтобы выяснить, кто являются целевыми пользователями и каковы их потребности по отношению к определенному продукту.Затем они составят карту пути пользователя по продукту с учетом таких вещей, как информационная архитектура, т. Е. Как контент организован и помечен в продукте, и какие функции могут понадобиться пользователю. В конце концов, они создадут каркасы, на которых будут представлены основные чертежи продукта.

С нанесенным на карту скелетом продукта дизайнер пользовательского интерфейса вносит свой вклад, чтобы воплотить его в жизнь. Дизайнер пользовательского интерфейса учитывает все визуальные аспекты пути пользователя, включая все отдельные экраны и точки касания, с которыми может столкнуться пользователь; представьте, что нажимаете кнопку, прокручиваете страницу вниз или пролистываете галерею изображений.

В то время как UX-дизайнер составляет план пути, дизайнер UI сосредотачивается на всех деталях, которые делают это путешествие возможным. Нельзя сказать, что дизайн пользовательского интерфейса — это внешний вид; Дизайнеры пользовательского интерфейса имеют огромное влияние на то, будет ли продукт доступным и инклюзивным. Они будут задавать такие вопросы, как «Как можно использовать различные цветовые комбинации для создания контраста и улучшения читаемости?» Или «Какие сочетания цветов подходят для лечения дальтонизма?» Вы можете узнать больше о дизайне пользовательского интерфейса для обеспечения доступности здесь.

Надеюсь, теперь вы начинаете понимать, что UX и UI-дизайн — это действительно две очень разные вещи. Подводя итог:

UX-дизайн — это все о выявлении и решении пользовательских проблем; Дизайн пользовательского интерфейса — это создание интуитивно понятных, эстетичных интерактивных интерфейсов.
UX-дизайн обычно стоит на первом месте в процессе разработки продукта, а затем UI. Дизайнер UX составляет основу пользовательского пути; затем дизайнер пользовательского интерфейса заполняет его визуальными и интерактивными элементами.
UX может применяться к любому виду продукта, услуги или опыта; Пользовательский интерфейс специфичен для цифровых продуктов и опыта.

2. Как UX-дизайн и UI-дизайн работают вместе?

Мы изучили различия между UX и UI; теперь давайте посмотрим, как они работают вместе. Вы можете задаться вопросом, важнее ли одно по сравнению с другим, но на самом деле они оба важны! Позвольте мне процитировать дизайнера и эксперта Хельгу Морено, которая довольно красноречиво выразила это в своей статье «Разрыв между UX и дизайном пользовательского интерфейса»:

«То, что выглядит великолепно, но трудно использовать, является примером отличного пользовательского интерфейса и плохого пользовательского интерфейса.В то время как что-то очень удобное, что выглядит ужасно, является примером отличного UX и плохого пользовательского интерфейса ».

Как видите, UX и UI неразрывно связаны, и хотя есть миллионы примеров отличных продуктов с одним, а не с другим, представьте, насколько успешнее они могли бы быть, если бы были сильны в обеих областях.

UI-дизайн похож на глазурь на торте UX. Представьте, что вам в голову пришла потрясающая идея для приложения; то, что явно отсутствует на рынке и действительно может изменить жизнь людей к лучшему.Вы нанимаете UX-дизайнера, который проведет исследование пользователей и поможет вам точно определить, какие функции должно иметь ваше приложение, и как следует наметить весь путь пользователя. Ваше приложение предлагает то, что нужно и хочет вашей целевой аудитории; однако, когда они загружают его, они обнаруживают, что текст на каждом экране едва читается (представьте желтый текст на белом фоне). Более того, кнопки расположены слишком близко друг к другу; они по ошибке продолжают нажимать не ту кнопку! Это классический случай, когда плохой UI разрушает то, что было бы хорошим UX.

С другой стороны, приходилось ли вам когда-нибудь сталкиваться с действительно красивым веб-сайтом только для того, чтобы обнаружить, что, помимо умопомрачительной анимации и точной цветовой схемы, использовать его на самом деле очень сложно? Хороший UI никогда не может компенсировать плохой UX; это все равно, что взять красиво украшенный торт, который на самом деле ужасен на вкус, когда вы его откусите.

Итак, когда дело доходит до дизайна продукта, UX и UI дополняют друг друга — и на сегодняшнем конкурентном рынке правильное решение обоих аспектов является абсолютной необходимостью.Независимо от того, выберете ли вы работу UX-дизайнером или UI-дизайнером, полезно понимать и то, и другое; в конце концов, вы неизбежно будете работать вместе. Это подводит нас к следующему разделу…

3. UX vs. UI-дизайн: какой карьерный путь подходит вам?

Хотя UX и UI-дизайн идут рука об руку, вам не нужно быть мастером и того, и другого. Итак, какой карьерный путь вам больше всего подходит: UX или UI? Если вам интересно, что вам больше подходит: UX или UI-дизайн, посмотрите мое видео ниже.Я касаюсь тех качеств, которые предрасполагают вас к успешной работе в каждой области. Если вы хотите узнать больше о том, чем на самом деле занимаются UX- и UI-дизайнеры изо дня в день, продолжайте читать!

Какие ключевые задачи и навыки требуются от UX-дизайнеров по сравнению с UI-дизайнерами?

Если вы хотите выяснить, какой карьерный путь подходит вам, важно учитывать ключевые навыки, необходимые для UX-дизайнеров по сравнению с UI-дизайнерами, а также типичные повседневные задачи каждого из них.В следующей инфографике мы выделили основные жесткие, программные и передаваемые навыки как для UX, так и для UI-дизайнеров. А в следующих разделах мы рассмотрим основные задачи и обязанности.

Чем занимается UX дизайнер?

Итак, теперь мы знаем, абстрактно, что влечет за собой роль UX-дизайнера, но как это переводится в повседневные задачи? Вот краткий пример типичных задач и обязанностей UX-дизайнера. В этом руководстве вы найдете более подробное описание процесса UX-дизайна.

Стратегия и содержание:

Каркас и прототипирование:

Выполнение и аналитика

Итак, частично маркетолог, частично дизайнер, частично менеджер проекта; роль UX сложна, интересна и многогранна. Фактически, роль UX-дизайнера сильно различается в зависимости от типа компании, в которой они работают. Вы видите, что итерация продукта, связанная с анализом или тестированием, действительно упоминается дважды, но на самом деле вы бы поместили ее в между каждым другим элементом в списке.В конечном итоге цель состоит в том, чтобы связать бизнес-цели с потребностями пользователей посредством процесса тестирования пользователей и удобства использования и доработки до того, что удовлетворяет обе стороны взаимоотношений.

Чем занимается дизайнер пользовательского интерфейса?

Если вам нравится идея создания потрясающих пользовательских интерфейсов, но вы считаете себя более наглядным человеком, возможно, вас больше интересует дизайн пользовательского интерфейса. Ниже вы найдете краткий снимок основных задач дизайнера пользовательского интерфейса или более подробное объяснение того, чем на самом деле занимается дизайнер пользовательского интерфейса.

Внешний вид продукта:

Анализ клиентов
Исследование дизайна
Разработка брендов и графики
Руководства и сюжеты пользователя

Отзывчивость и интерактивность:

Создание прототипов пользовательского интерфейса
Интерактивность и анимация
Адаптация ко всем размерам экрана устройства
Реализация с разработчиком

Как визуальный и интерактивный дизайнер, роль пользовательского интерфейса имеет решающее значение для любого цифрового интерфейса и для клиентов является ключевым элементом доверия к бренду. Хотя сам бренд никогда не является исключительной ответственностью дизайнера пользовательского интерфейса, его перевод на продукт — это ответственность.

Вы также отметите последний пункт, который устанавливает ответственность за «реализацию» дизайна вместе с разработчиком. Хотя обычно так выполнялись задания пользовательского интерфейса в прошлом, вы должны знать, что границы размываются, поскольку термин «веб-дизайнер» (по сути, дизайнер пользовательского интерфейса, который умеет писать код) заменяется опытом дизайнеров пользовательского интерфейса. В то время как UX не нуждается в кодировании, пользовательский интерфейс — это роль, которая со временем будет полагаться на него как на часть создания интерактивных интерфейсов.Мы обсуждаем, должны ли дизайнеры учиться программировать здесь.

Что лучше оплачивается: UX или UI?

Заработная плата, конечно, определяется многими факторами, но в первую очередь:

Местоположение
Опыт
Отрасль
Тип проекта / продукта

В среднем вы обнаружите, что рабочие места UI и UX имеют одинаковые диапазоны зарплат в разных стартапах. и второстепенные технологические отрасли. Однако вы обнаружите, что в технологических отраслях за пределами Интернета и мобильных устройств (например,грамм. автомобильные компании, производители медицинского оборудования и т. д.) для дизайнеров пользовательского интерфейса появляется все больше и больше возможностей, поскольку эта область не только более устоявшаяся, но и имеет более прямое, бизнес-ориентированное приложение.

Однако, опираясь на средние значения, в Центральной Европе можно найти рабочие места как для пользовательского опыта, так и для пользовательского интерфейса в следующем диапазоне ценностей.

Годовой:

Зарплата младшего уровня 28 000–33 000 евро
Зарплата среднего уровня 38–45 000 евро
Зарплата старшего уровня 50–80 000 евро

Почасовая оплата:

Младший фрилансер, € 30–50 евро
Фрилансер среднего уровня 50–75 евро
Консультант старшего уровня 75–100 евро

* Цифры основаны на данных о заработной плате в Германии и Центральной Европе.

Чтобы узнать о зарплатах в вашем районе, ознакомьтесь с разбивкой вашего потенциала заработка как UX-дизайнера и как UI-дизайнера, а также я рекомендую взглянуть на самооценку зарплат на Glassdoor.

Почему компании часто рекламируют роли UX / UI как единое целое?

Мы установили, что UX и UI-дизайн — это две отдельные области, поэтому теперь вы можете задаться вопросом: почему так много объявлений о вакансиях требуют от UX / UI дизайнеров в одном?

На самом деле, по большому счету, UX и UI — все еще относительно новые области, и, как уже упоминалось, они имеют тенденцию быть специфическими для технологической индустрии.За пределами мира дизайна и технологий они не так широко изучены, несмотря на то, что они невероятно важны для бизнеса. Хотя ценность хорошего дизайна для бизнеса все больше признается, менеджеры по найму и рекрутеры все еще склонны полагать, что UX и UI выполняются одним и тем же человеком — отсюда и всеобъемлющие объявления о вакансиях, с которыми вы, несомненно, сталкиваетесь.

Однако это не всегда просто недопонимание. Многие компании будут сознательно искать универсальных дизайнеров, которые могут охватить как UX, так и UI, или, по крайней мере, имеют представление о принципах UX или UI в дополнение к их основному набору навыков.

Так как же понять, что происходит на самом деле? Независимо от того, ищете ли вы роль только для пользовательского интерфейса, карьеру, ориентированную исключительно на UX, или их сочетание, важно не ограничиваться названием должности и уделять пристальное внимание перечисленным навыкам, задачам и обязанностям. Теперь вы знаете разницу между UX и UI, и вы сможете быстро определить, действительно ли объявление о вакансии ориентировано на одно или другое, или оно преднамеренно нацелено на оба.

UX vs. UI: как решить, что лучше?

Если вы хотите сделать карьеру в дизайне, но все еще не уверены, следует ли сосредоточиться на UX или UI, вам нужно потратить некоторое время на размышления о том, в чем заключаются ваши интересы, а также о том, что вы от природы. хорош в.Как UX, так и UI-дизайн — это совместная работа с различными карьерными путями, что позволяет вам оказаться в авангарде технологий и инноваций. С учетом сказанного, есть несколько ключевых различий между характером работы и необходимыми навыками.

Почему бы не попробовать эту быструю блок-схему, чтобы понять, какой путь лучше всего подходит для вас?

Карьера в UX требует сочувствия, склонности к решению проблем и творческого и аналитического подхода. UX-дизайнерам также нужны первоклассные коммуникативные навыки и немного деловых ноу-хау.Чтобы узнать больше о навыках, которые вам необходимы в качестве дизайнера UX, ознакомьтесь с этим бесплатным руководством.

Карьера в области пользовательского интерфейса также требует понимания принципов взаимодействия с пользователем, но она гораздо больше сосредоточена на визуальных, интерактивных аспектах дизайна. Если у вас острый взгляд на эстетику и вам нравится идея сделать технологии красивыми, удобными и доступными, возможно, вам больше подойдет карьера в области пользовательского интерфейса. Конечно, если вам нравится идея карьеры, которая сочетает в себе и то, и другое, ничто не мешает вам стать дизайнером-разносторонним дизайнером!

Прежде чем принимать какие-либо решения, я рекомендую проверить этот пост: Какой путь технической карьеры мне подходит? Справочник по четырем из самых выгодных профессий в сфере технологий на данный момент.Также стоит попробовать свои силы в обоих, поэтому рассмотрите следующие (бесплатные) короткие курсы:

Как вы изучаете навыки UX и UI-дизайна?

Несмотря на то, что существуют университетские учреждения, предлагающие программы интерактивного дизайна и визуального дизайна, существует очень мало официальных способов освоить навыки UI или UX-дизайна применительно к работе в технических стартапах или даже в крупных корпорациях.

Если вы живете в крупном мегаполисе, вам может повезти, если у вас есть доступ к различным учебным курсам или программам для занятий, таким как General Assembly, или локализованным программам, размещенным на серверах Google и других технологических гигантов.

Онлайн и гибкость, вы найдете бесконечный выбор бесплатного контента и курсов для обоих навыков. Я настоятельно рекомендую проверять план и содержание каждого курса, чтобы увидеть, соответствует ли то, что изучается, определениям, изложенным в этой статье; но если они правильно структурированы, варианты, найденные на таких платформах, как Udacity и Udemy, могут послужить хорошим введением в эту область.

Если вы заинтересованы в изучении навыков UX или UI-дизайна, чтобы сменить карьеру, особенно если у вас практически нет отраслевого опыта, вы всегда можете начать с множества бесплатных тренингов по UX / UI-дизайну. .

Но в долгосрочной перспективе вам понадобится настоящее обучение, и для этого мы рекомендуем выбрать гибкий онлайн-курс с наставником, который вы можете пройти вместе с вашими текущими обязательствами, точно так же, как программа UX-дизайна и программа UI-дизайна, которые мы предлагаем здесь, в CareerFoundry, оба из которых поддерживаются гарантией трудоустройства.

Для тех из вас, кто находится на ранней стадии рассмотрения своих вариантов, мы составили здесь исчерпывающее руководство по лучшим учебным курсам UX с рекомендациями о том, что следует учитывать при выборе курса.Вы также найдете множество других советов и советов в этих руководствах:

4. Почему я написал эту статью?

Я хотел бы быстро сформулировать мотивацию этого поста. Во-первых, очевидно, что существует явная потребность в большем количестве статей такого типа, поскольку я обнаружил, что мало экспертов удосуживаются публично определять различия UX и UI-дизайна. Как я уже неоднократно упоминал, поля перепутаны, и это без надобности. Я надеюсь, что, будь то новичок или эксперт, вы сможете извлечь что-то из этой статьи и поделиться этим с другими, которые так же сбиты с толку, как менеджеры по найму, пишущие сообщения о вакансиях.

Во-вторых, если вы заинтересованы в изучении одной или обеих этих дисциплин, я надеюсь, что их определения были достаточно ясными, чтобы вы могли лучше решить, с чего начать, или какая из них может быть более привлекательной для вас как будущая профессия.

Наконец, я считаю важным стимулировать разговор. Я надеюсь, что некоторые из вас, прекрасные читатели, не согласятся со мной и что вы публично заявите об этом, связавшись с нами или опубликовав ответ. Если наша отрасль запуталась, наша работа состоит в том, чтобы не запутать ее, и чем больше увлеченных профессионалов сделают шаг вперед и внесут свой вклад в определение, тем лучше.

Разница между UX и UI: визуальный обзор

Щелкните здесь, чтобы открыть инфографику в новой вкладке.

5. Подведение итогов и дальнейшее чтение

Надеюсь, этот пост каким-то образом прояснил давнюю путаницу вокруг UX и UI. То, что мы рассмотрели сегодня, — это лишь верхушка айсберга; как UX, так и UI намного больше, поэтому стоит изучить каждую область подробно, чтобы понять, что они влекут за собой, и глубже понять, чем они отличаются.

Если вы хотите узнать больше, ознакомьтесь с этими статьями:

И если вы понимаете разницу между UX и UI и хотите добавить третий термин в свою базу знаний:

10 принципов, извлеченных из Болезненные ошибки

Когда дело доходит до дизайна пользовательского интерфейса, часто лучший способ научиться — анализировать ошибки сайтов, которые вы ненавидите использовать.

Слушайте этот пост и подпишитесь с помощью Apple Podcasts, Google Play, Spotify или RSS

У меня странное хобби; Я собираю примеры плохого дизайна пользовательского интерфейса.Сайты, на которые я захожу, меня до чертиков раздражают. Эту идею я получил от Винсента Фландерса, чей сайт «Отстойные веб-страницы» был для меня источником вдохновения в начале моей карьеры.

Я считаю, что лучший способ узнать, что делает хороший дизайн пользовательского интерфейса, — это посмотреть на плохой дизайн, а затем сделать наоборот! Возможно, не самый научный подход, но он сработал для меня и привел к созданию десяти принципов, лежащих в основе моего подхода к дизайну пользовательского интерфейса. Десять принципов, которыми я хочу поделиться с вами в этом посте.

Сделайте это легко
Не превращайте свои проблемы в проблемы пользователей
Потрите детали
Ясность выше ума
Будьте человеком
Дизайн для кого-то, никого не отчуждать
Соблюдайте условности
Не ломай сеть
Неудача изящно
На первом месте должны быть потребности пользователя

Итак, приступим.

Вы обеспокоены тем, что ваш веб-сайт не может реализовать свой потенциал? Получите аудит сайта и улучшите его сегодня.

1. Сделайте дизайн пользовательского интерфейса простым

Хотите ли вы стимулировать повторный трафик или увеличить конверсию, лучшее, что вы можете сделать, — это сделать пользовательский интерфейс максимально простым в использовании. Пользователи пойдут по пути наименьшего сопротивления, а это значит, что если вы упростите работу, они будут каждый раз выбирать вас среди конкурентов, даже если вы будете стоить немного дороже.

Снова и снова я вижу сайты, которые, кажется, полны решимости сделать жизнь пользователей более сложной, чем простой.Взять, к примеру, пароли. Нет причин, по которым они должны быть такими болезненными. Сайты, которые настаивают на использовании длинных паролей, состоящих из букв, цифр или символов, просто раздражают жизнь.

В этом нет необходимости. Уже давно существуют другие варианты, в первую очередь отправка пользователям проверочной ссылки на их адрес электронной почты, которую им просто нужно щелкнуть, чтобы войти в систему.

Сделайте упорную работу, чтобы сделать работу пользователей максимально простой.

Не то чтобы пароли — единственный пример того, как мы заставляем пользователей прилагать ненужные усилия.Ссылки для отказа от подписки в электронных письмах — еще один отличный пример. Отказаться от подписки нужно одним щелчком мыши, но часто пользователям затем требуется ввести адрес электронной почты, от которого они отказываются. В некоторых случаях сайты даже требуют, чтобы пользователи вошли в систему, чтобы отказаться от подписки, а данные для входа пользователи часто не могут вспомнить.

2. Не превращайте свои проблемы в проблемы пользователей

Следующая проблема, с которой я регулярно сталкиваюсь, — это дизайнеры пользовательского интерфейса и веб-разработчики, создающие дизайн пользовательского интерфейса, который больше ориентирован на решение своих проблем, чем проблемы пользователя.Фактически, многие дизайнеры и разработчики, кажется, вполне счастливы переложить свою работу на плечи пользователя.

Например, возьмем проблему, с которой многие сайты сталкиваются с атаками методом грубой силы и спамом. Многие веб-разработчики принимают решение добавить на сайт CAPTCHA. Это быстрое и простое решение для них, но добавляет хлопот и сложности пользователю. Почему пользователь должен доказывать, что он человек?

См. Также: Мое исчерпывающее руководство о том, почему CAPTCHA — отстой. Форматирование

— еще один пример этой проблемы.Я сталкиваюсь со многими сайтами, которые требуют от пользователей определенного формата телефонных номеров и почтовых индексов. Это потому, что переформатирование информации для помещения в базу данных требует времени и усилий. Так легче заставить пользователя это сделать.

Просьба к пользователям вводить данные определенным образом может сэкономить время веб-разработчику на их переформатирование, но это приводит к плохому дизайну пользовательского интерфейса.

3. Подумайте о деталях дизайна пользовательского интерфейса

Отчасти проблема с дизайном пользовательского интерфейса заключается в том, что легко сделать что-то «достаточно хорошим».Но достаточно хорошо выглядеть — это еще не значит хорошо работать с пользователем. Когда дело доходит до дизайна пользовательского интерфейса, дьявол кроется в деталях. Именно эти мелочи могут иметь решающее значение.

Крошечные неприятности в дизайне пользовательского интерфейса — это ничто само по себе, но они быстро накапливаются, создавая более разочаровывающий опыт. Мое старое банковское приложение — отличный тому пример. Я перешел из First Direct в Barclays только потому, что мне надоело иметь дело с разочаровывающими мелкими элементами опыта, которые вместе казались смертью от тысячи порезов.

Когда дело доходит до дизайна пользовательского интерфейса, дьявол кроется в деталях.

4. Ясность выше ума

Одна из моих проблем с дизайном пользовательского интерфейса — это сайты, которые пытаются быть умными или симпатичными. Страницы с ошибками 404 — самый яркий тому пример, и это сводит меня с ума!

Обнаружение, что ссылка, на которую вы нажали, не работает, — разочаровывающее испытание, и все же именно в этот момент дизайнер решает быть милым и пошутить, часто касаясь «Звездных войн» («Это не та страница, на которой вы находитесь. находясь в поиске»).Это бесит. Страница 404 должна помочь пользователю найти нужный контент, а не шутить.

Не позволяйте вашему продуманному дизайну и тексту препятствовать предоставлению пользователю полезной информации, на которую он может действовать.

Но страницы с ошибками — не единственный пример этого. Маркетологи всегда любят быть умными. Они пытаются «взаимодействовать» с пользователями, используя эмоционально заряженный текст. Но в процессе они часто теряют ясность. Становится неясным, что именно они продают!

Не поймите меня неправильно.Здесь есть место увлекательным копирайтам и дизайнерским изыскам. Их просто нужно использовать осторожно и не мешать тому, что пользователь хочет делать, или скрывать то, что им нужно знать.

См. Также: Обработка страниц ошибок

5. Будьте человечны

Интересная вещь происходит, когда кто-то сидит, чтобы написать какую-нибудь веб-копию или разработать пользовательский интерфейс; они перестают быть людьми. Они начинают проектировать и писать вещи, которые ни один человек никогда бы не сделал в реальной жизни.

Возьмем, к примеру, копию, которую я нашел на сайте университета:

Наряду с тем, чтобы студенты могли максимально использовать потенциал своих академических занятий, университет также предоставляет среду, которая обслуживает всех студентов, предлагая различные варианты проживания, общественное питание, активный студенческий союз, занятия спортом и искусство.

Ни один человек не говорит так, за исключением, возможно, серийного убийцы из «Молчания ягнят» («Он натирает лосьоном свою кожу»). Это легко можно было бы сделать гораздо более дружелюбным:

Студенческая жизнь — это больше, чем просто учеба. Мы поддерживаем вас во всем, что вам нужно: от проживания и питания до активного студенческого союза, отличных спортивных сооружений и увлекательных художественных программ.

Хуже всего то, что дизайн пользовательского интерфейса становится все более манипулятивным.Это относится к пользователям, как к крупному рогатому скоту, которого нужно вести на бойню, а не к ценным клиентам, которых мы должны взращивать.

Дизайн пользовательского интерфейса становится все более манипулятивным

6. Дизайн для кого-то, никого не отталкивающий

Я поражен тем, насколько скучно и скучно выглядят многие веб-сайты в наши дни. Мне кажется, что многие организации не смотрят дальше своего соперничества за вдохновение. В результате все сайты в секторе часто выглядят одинаково.

Но проблема не в этом.Суть проблемы в том, что организации пытаются обращаться ко всем. Им не удается расставить приоритеты для своей аудитории, и в результате получается безвкусный, посредственный дизайн, потому что они боятся кого-нибудь обидеть.

Не поймите меня неправильно; Важно, чтобы ваш дизайн никого не отталкивал. Но если вы попытаетесь обратиться ко всем, то в конечном итоге никому не понравитесь. Вы должны выбрать аудиторию и разработать для нее дизайн.

Неудивительно, что все дизайны пользовательского интерфейса выглядят одинаково. Нам не удается определить нашу аудиторию и искать вдохновения вне конкуренции.См. Также: 3 способа выделить свой сайт из толпы

7. Соблюдайте условные обозначения в дизайне пользовательского интерфейса

Хотя это здорово, что наши дизайны свежие и оригинальные, необходимо соблюдать баланс. Это не значит, что мы должны отбросить все условности, появившиеся в сети. Я часто сталкиваюсь с сайтами, где дизайнер так отчаянно стремился быть «оригинальным», что дизайн пользовательского интерфейса превратился в непонятную неразбериху, по которой ни один пользователь не мог реально ориентироваться.

Чтобы ваш сайт выделился из общей массы, не обязательно отказываться от условностей. Навигация не должна внезапно появляться внизу страницы, и нам также не нужно возрождать таинственную навигацию.

Вместо этого мы должны стремиться обеспечить единообразие наших сайтов, но также и чувство близости. В большинстве случаев дизайн пользовательского интерфейса должен казаться предсказуемым.

Как опытные дизайнеры, мы должны раздвигать границы творчества. Но мы также должны признать, что у пользователей есть определенные ожидания, и мы не можем игнорировать эти условности.См. Также: «Конвергенция дизайна» — это не ругательство.

8. Не ломайте Интернет

Каждый дизайнер должен уважать среду, в которой он или она работает, и дизайн пользовательского интерфейса не исключение. Многие веб-дизайнеры, кажется, игнорируют этот факт, создавая сайты, которые борются с природой браузера. Я часто встречаю сайты, которые:

Сломайте кнопку возврата.
Боритесь с жидким аспектом сети.
Прервать историю браузера.
Взломать адрес сайта.
Уменьшить доступность сайта.

Современные веб-приложения — худшие виновники этого. Поскольку эти приложения доставляют контент через Javascript, модель страницы ломается. Это означает, что кнопки «Назад», история браузера и веб-адрес перестают работать. Это также создает серьезные проблемы с доступностью.

Вы можете возразить, что это не имеет ничего общего с дизайном взаимодействия, но браузер является частью пользовательского интерфейса, и поэтому мы должны это учитывать. Тот факт, что мы создаем веб-приложение, не означает, что мы можем игнорировать тот факт, что мы доставляем его через браузер.

Будьте осторожны, чтобы в процессе создания отличного интерфейса вы не сломали браузер.

9. Изящная ошибка

Хороший дизайн пользовательского интерфейса должен уметь приспосабливаться к неожиданностям, а это означает изящный провал, когда что-то идет не так. К сожалению, в этом отношении многие сайты терпят неудачу.

Слишком много сайтов, с которыми я сталкиваюсь, выдают непонятные сообщения об ошибках, обвиняют пользователя в проблеме или вообще ничего не говорят.

Но это не только техническая проблема или проблема копирайтинга.Я вижу, как опытные дизайнеры размещают сообщения об ошибках в одном месте, когда внимание пользователя находится в другом. Это заставляет пользователя задуматься о том, что произошло, потому что он не замечает сообщения о проблеме.

Хороший дизайн пользовательского интерфейса должен уметь адаптироваться к неожиданностям, а это означает изящный провал, когда что-то идет не так.

10. Ставьте нужды пользователя на первое место

Наконец, мы пришли к тому, что, возможно, это самый важный урок из всего, что мы можем извлечь из плохого дизайна пользовательского интерфейса, а именно — ставить нужды пользователей на первое место.Слишком много организаций настолько зациклены на своей повестке дня, что не учитывают потребности пользователей.

Возьмем, к примеру, формы подписки на рассылку новостей. Пользователь редко заходит на сайт, желая подписаться на рассылку новостей. У них на уме другая цель. Однако часто мы набрасываемся на пользователей, как только они заходят на наши сайты, с просьбой выполнить наш призыв к действию. Мы прерываем их задачу, чтобы попросить их завершить нашу.

Это ошибка как с точки зрения пользователей, так и с точки зрения бизнеса.Если мы сначала поможем пользователю выполнить его задачу, мы обнаружим, что он гораздо более открыт для выполнения нашего призыва к действию.

Если мы сначала поможем пользователю выполнить его задачу, мы обнаружим, что он гораздо более открыт для выполнения нашего призыва к действию.

Верхушка айсберга

Этот список — лишь верхушка айсберга. Редко проходит день, когда я не вижу глупого решения по дизайну пользовательского интерфейса, от которого у меня закипает кровь. Я вижу так много организаций, которые зацикливаются на персонализации, виртуальной реальности, блокчейне или любой другой последней тенденции, когда у них еще нет правильных основ.

Прежде чем мы поспешим познакомиться с новым и ярким, давайте дадим пользователям опыт, которого они заслуживают. Если вы мне не верите, то возьмите это у британского комика Майкла Макинтайра.

Получить обзор сайта

См. Также: Как применить итеративный подход к дизайну пользовательского интерфейса. .

Дизайн интерфейсов: Как стать дизайнером интерфейсов. Еще одна статья с кучей ссылок на… | by Matvey Pravosudov

Как стать дизайнером интерфейсов. Еще одна статья с кучей ссылок на… | by Matvey Pravosudov

Составьте план

Как стать дизайнером интерфейсов – 10 шагов по старту с нуля

Крэш-курс по UI-дизайну / Блог компании Я люблю ИП / Хабр

UI vs. UX

1. Стратегия

2. Набор возможностей

3. Структура

4. Компоновка

5. Поверхность

Принцип № 1. Простота превыше всего

Принцип № 2. Давайте ясную, информативную обратную связь

Принцип № 3. Постоянство имеет значение

Принцип № 4. Если сомневаетесь, используйте известные дизайн-паттерны

Принцип № 5. Используйте визуальную иерархию

Дизайнер интерфейсов – обучение с нуля дизайну интерфейсов, онлайн-курс от GeekBrains

Дизайн интерфейсов. Разработка и дизайн пользовательского интерфейса | Рекламное агентство PIX media

Что такое UI и UX дизайн design? Что в них общего и что различного? | by Writes

26 лекций для дизайнеров интерфейсов

Дмитрий Карпов — Что такое сетка и для чего она нужна

Олег Чулаков — В чем главная задача анимации в UI

Никита Обухов — Модульный дизайн. Изучение и стандартизация подачи информации в веб

Геннадий Лохтин — Будущее интерфейсов браузеров

Юрий Ветров — Дизайн-команда в продуктовой компании

Анна Кармишина — Здравый смысл, брендинг, веб и как всё это связано

БВШД: Дизайн мобильных приложений

Никита Ефимов — Процесс проектирования интерфейса: зачем нужен этап анализа

Дмитрий Сатин — Социально-ориентированное проектирование

Фёдор Аксёнов — Дистанционное UX–тестирование

Роман Черных— Поиск и дифференциация UX-персонала

Михаил Сокольников — Дизайн-мышление в финтехе: вызовы и лучшие практики

Мария Сташенко — Проектирование пользовательского опыта горожан

Алексей Бородкин — Как подружить разработку и UX

Дизайн приложения

Дизайн экрана мобильного приложения в Sketch 3

Создание анимации для мобильного приложения

Константин Горский — Дизайн интерфейсов

Особенности проектирования интерфейсов для Smart TV

Как найти и устранить проблемы веб-интерфейса

Сайт как интерфейс взаимодействия с пользователем

Платон Днепровский — Введение в дисциплину проектирования UI. Общие сведения

Антон Алябьев — Сбор и анализ требований к интерфейсу

Антон Алябьев — Методики Персонажей, форматы сценариев

Платон Днепровский — Сервис-дизайн, информационная архитектура

Платон Днепровский — Введение в дисциплину. Общие сведения

Что такое дизайн пользовательского интерфейса?

10 рекомендаций Нильсена и Молиха по дизайну пользовательского интерфейса

Узнайте, как Adobe объединяет десять рекомендаций по дизайну пользовательского интерфейса Nielsen и Molich

1. Видимость состояния системы

2. Соответствие системы реальному миру

3. Пользовательский контроль и свобода

4. Согласованность и стандарты

5.Предотвращение ошибок

6.Распознавание, а не повторение

7. Гибкость и эффективность использования

8. Эстетичный и минималистский дизайн

9. Помощь пользователям в распознавании, диагностике и устранении ошибок

10. Справка и документация

Вывод

Где узнать больше

Ссылки и где узнать больше

Основы проектирования пользовательского интерфейса | Usability.gov

Выбор элементов интерфейса

Лучшие практики для проектирования интерфейса

Список литературы

4 золотых правила дизайна пользовательского интерфейса

1. Предоставьте пользователям контроль над интерфейсом

Сделай действия обратимыми — будь снисходительным

Создание удобного интерфейса

Обеспечьте информативную обратную связь — будьте признательны

Показать статус системы

Подходит для пользователей с разным уровнем квалификации

2. Сделайте так, чтобы пользователю было удобно взаимодействовать с продуктом

Удалите все элементы, которые не помогают вашим пользователям

Не запрашивать у пользователей данные, которые они уже ввели

Избегайте жаргона и системных терминов

Применение закона Фиттса к интерактивным элементам

Конструкция доступных интерфейсов

Использование метафор реального мира