Дизайн интерфейса: Что такое UX/UI-дизайн и как попасть в эти профессии — статьи на Skillbox

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

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

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

10 лучших инструментов дизайна пользовательского интерфейса | by Steak Lab о дизайне и творчестве

Хотите создать идеальный пользовательский интерфейс? Вот некоторые из лучших инструментов.

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

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

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

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

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

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

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

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

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

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

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

Спасибо за внимание!

Если вам понравилась статья, нажмите кнопку с аплодисментами (можно несколько раз).

Больше информации:

На Сайте: steak-lab.ru|Во ВКонтакте: vk.com/steaklab|На Telegram-канале: t-do.ru/steak_lab|В Instagram: www.instagram.com/steak_lab|На Facebook: www.facebook.com/SteakLab|В Twitter: twitter.com/steaklab

15 принципов дизайна интерфейсов, которые позволят создавать лучшие веб-сайты

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

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

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

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

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

Мы начнем с рассмотрения основ юзабилити.

1. Не заставляйте пользователя думать

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

Предстоящие воркшопы

2. Дело не в дизайне

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

Суть сайта сводится к контенту и функциональности, а не к дизайну.

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

3. Предоставляйте пользователю контроль

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

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

4. Проектируйте для взаимодействия

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

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

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

5. Фокусируйтесь на одном действии за раз

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

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

6. Разбейте плотный контент на куски

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

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

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

7. Группируйте связанные элементы

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

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

8. Создайте сильную визуальную иерархию

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

Размер, цвет и расположение играют важную роль в создании визуальной иерархии и ориентировании пользователя по странице.

9. Будьте предсказуемы

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

Мой совет: если вы хотите поэкспериментировать (и вам следует), сделайте это на сторонних проектах или на определенных веб-сайтах, где уместно исследование.

10. Используйте эстетику, чтобы вызвать у пользователей правильное настроение

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

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

Дизайн игрового автомата является хорошим примером роли эстетики в формировании пользовательского опыта.

11. Изображения должны иметь четкую цель

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

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

12. Поддерживайте инклюзивность

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

Опасно делать предположения о нашей аудитории и ее потребностях в доступности.

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

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

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

14. Тестируйте и проводите итерации

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

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

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

15. Приоритет производительности

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

Низкая производительность оказывает значительное влияние на конверсию и просмотры страниц.

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

Принципы проектирования интерфейса – ограничения?

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

Являются ли принципы дизайна интерфейса ограничением? Безусловно. Однако они не сдерживают творчество или инновации. Творчество и инновации случаются благодаря ограничениям, а не вопреки им.

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

как их использовать к месту и не бесить пользователей — Дизайн на vc.ru

Все сталкивались с ситуацией когда попадали на сайт с модным, красивым, но категорически неудобным интерфейсом. Алексей Нибо, арт-директор digital-агентства «Атвинта», комментирует UI/UX-тренды 2020 года и рассказывает, как им следовать, чтобы не испортить дизайн.

{«id»:140056,»url»:»https:\/\/vc.ru\/design\/140056-trendy-v-dizayne-interfeysov-2020-goda-kak-ih-ispolzovat-k-mestu-i-ne-besit-polzovateley»,»title»:»\u0422\u0440\u0435\u043d\u0434\u044b \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 2020 \u0433\u043e\u0434\u0430: \u043a\u0430\u043a \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a \u043c\u0435\u0441\u0442\u0443 \u0438 \u043d\u0435 \u0431\u0435\u0441\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439″,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/140056-trendy-v-dizayne-interfeysov-2020-goda-kak-ih-ispolzovat-k-mestu-i-ne-besit-polzovateley»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/140056-trendy-v-dizayne-interfeysov-2020-goda-kak-ih-ispolzovat-k-mestu-i-ne-besit-polzovateley&title=\u0422\u0440\u0435\u043d\u0434\u044b \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 2020 \u0433\u043e\u0434\u0430: \u043a\u0430\u043a \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a \u043c\u0435\u0441\u0442\u0443 \u0438 \u043d\u0435 \u0431\u0435\u0441\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/140056-trendy-v-dizayne-interfeysov-2020-goda-kak-ih-ispolzovat-k-mestu-i-ne-besit-polzovateley&text=\u0422\u0440\u0435\u043d\u0434\u044b \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 2020 \u0433\u043e\u0434\u0430: \u043a\u0430\u043a \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a \u043c\u0435\u0441\u0442\u0443 \u0438 \u043d\u0435 \u0431\u0435\u0441\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/140056-trendy-v-dizayne-interfeysov-2020-goda-kak-ih-ispolzovat-k-mestu-i-ne-besit-polzovateley&text=\u0422\u0440\u0435\u043d\u0434\u044b \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 2020 \u0433\u043e\u0434\u0430: \u043a\u0430\u043a \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a \u043c\u0435\u0441\u0442\u0443 \u0438 \u043d\u0435 \u0431\u0435\u0441\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/140056-trendy-v-dizayne-interfeysov-2020-goda-kak-ih-ispolzovat-k-mestu-i-ne-besit-polzovateley»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u0422\u0440\u0435\u043d\u0434\u044b \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 2020 \u0433\u043e\u0434\u0430: \u043a\u0430\u043a \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a \u043c\u0435\u0441\u0442\u0443 \u0438 \u043d\u0435 \u0431\u0435\u0441\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439&body=https:\/\/vc.ru\/design\/140056-trendy-v-dizayne-interfeysov-2020-goda-kak-ih-ispolzovat-k-mestu-i-ne-besit-polzovateley»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

7579 просмотров

В основе статьи — перевод видео о трендах из блога Envato.

1. Сдержанная анимация

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

«В 2019 году интерфейсы были довольно перегружены анимацией. Надеюсь, в 2020 году дизайнеры будут использовать этот инструмент с умом и менее навязчиво», — пишет в блоге специалист Envato.

Такой прием использовали на своем сайте Seek Career — группа компаний, которые помогают людям найти работу. Анимированный элемент в шапке сайта привлекает внимание пользователей к разделу Seek’s career advice.

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

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

2. Неоморфизм

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

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

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

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

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

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

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

Дизайн в таком стиле может путать пользователей. Поскольку неоморфизм построен на игре объема, света и тени, пользователю сложно понять, что кликабельно, а что нет.

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

Например, в этой стилистике мы сделали 3D-иконки на сайте родильного дома. Это декоративный элемент. Все кликабельные кнопки и инпуты оставили привычными для пользователей.

Алексей Нибо

арт-директор digital-агентства «Атвинта»

3. Полноэкранные изображения

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

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

Например, креативное агентство Playful на главной странице своего сайта-портфолио использует полноэкранное видео, которое при скролле демонстрирует проекты команды.

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

Алексей Нибо

арт-директор digital-агентства «Атвинта»

4. Беспринципное нарушение правил

Хорошие новости для дизайнеров-анархистов: в 2020 году можно забить на все правила. Этот тренд перекликается с другими модными направлениями в дизайне: эстетикой стритарта и возрождением анти-дизайнерского брутализма в вебсайтах.

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

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

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

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

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

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

Алексей Нибо

арт-директор digital-агентства «Атвинта»

5. Вариативные шрифты

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

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

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

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

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

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

Алексей Нибо

арт-директор digital-агентства «Атвинта»

6. Крафтовые элементы

Этот тренд цикличен и сейчас он снова возвращается: в 2020 году в моде иллюстрации, иконки и другие элементы, нарисованные дизайнерами вручную.

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

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

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

Один из последних наших проектов с рисованными иллюстрациями — промосайт детского онлайн-лагеря «Good Лето».

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

Алексей Нибо

арт-директор digital-агентства «Атвинта»

7. Гибкие дизайн-системы

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

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

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

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

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

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

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

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

Алексей Нибо

арт-директор digital-агентства «Атвинта»

Суммируем

Еще раз перечислим все тренды и где их уместно использовать:

1. Ненавязчивая анимация поможет разбавить сайт скучной тематики и привлечь внимание пользователя к целевому действию.
2. Неоморфизм придает сайту стильный и футуристичный вид, но использовать его стоит осторожно, чтобы не запутать пользователей.
3. Огромные изображения во весь экран идеальны для корпоративных сайтов, на которых важно показать размах компании. А также для сайтов бьюти или фэшн-индустрии и всех тех направлений бизнеса, где важно эффектно презентовать продукт бренда.
4. Анти-дизайн подходит для молодежной аудитории и арт-тематики.
5. Вариативные шрифты крутое решение, но все еще есть техническое ограничение на их использование: старые версии браузеров могут их не поддерживать. Так что перед применением этого решения, выясните, что использует целевая аудитория сайта.
6. Крафтовая стилистика лучше всего зайдет для компаний, которым важно транслировать ценности душевности и заботы о людях.
7. Гибкие и самобытные дизайн системы позволят стилю бренда развиваться, одновременно отвечая на тренды и при этом не изменяя себе.

Дизайн интерфейса — заказать разработку, цены на создание интерфейса

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

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

Предельная ясность

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

Очевидные предпочитаемые действия

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

Сила контекста

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

Настройки по умолчанию

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

Проще – лучше

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

Обратная связь

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

Агентство «Дигимак» занимается разработкой интерфейсов с 2008 года. У нас можно заказать проектирование интерфейсов для сайтов, мобильных приложений. Работаем с клиентами из Москвы, Краснодара и других городов. Мы соблюдаем все актуальные принципы разработки интерфейсов и предлагаем клиенту выгодные цены на данную услугу.

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

В этой статье рассказывается, какую роль дизайн интерфейсов играет в условиях современного рынка. А также, что отличает хороший интерфейс от плохого (UI = user interface, то есть, интерфейс пользователя). Также мы взглянем на парочку новых моделей UI дизайна, включая Google Fuchsia и Fluent Design от Microsoft.

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

Творчество разработчиков пользовательских интерфейсов ограничено определенным устройством и операционной системой. Их работа часто должна соответствовать рекомендациям производителя операционной системы (Google для Android, Apple для iOS). Apple публикует, что можно, а чего нельзя для пользовательского интерфейса, а также подробный список рекомендаций для UI. У Google также есть собственные стандарты материального дизайна.

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

Многие элементы пользовательского интерфейса мы воспринимаем как приглашения к взаимодействию с приложением или устройством:

Поле для ввода текста и курсор предлагают пользователю ввести текст, а кнопка «Подтвердить» — кликнуть или коснуться ее, чтобы продолжить:

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

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

При нажатии по кнопке-гамбургеру…

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

Ползунок приглашает пользователя коснуться/кликнуть и перетащить его, чтобы изменить настройки, например, яркость экрана:

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

Это лишь некоторые примеры элементов дизайна интерфейсов приложений. Но все они объединены идеей повысить эффективность взаимодействия с пользователем.

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

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

Разработан с учетом глубокого понимания пользователя, его потребностей и того, как он будет перемещаться по приложению или сайту. Поэтому мы и говорим, что дизайн UI является одним из аспектов UX-дизайна (UX = User eXperience, опыт взаимодействия).

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

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

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

В таком интерфейсе очень много мелкого текста, который трудно читать. Кроме этого, плохому интерфейсу присуще использование жаргона (в том числе профессионального) вместо понятного языка. Например, написано: «Плохие данные». А нужно — «Неверные логин и пароль». К плохому интерфейсу также можно отнести применение назойливых диалоговых окон вместо панели уведомлений:

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

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

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

Я, как давний пользователь Amazon, особо и не замечал изменений во внешнем виде или способе взаимодействия. Но вот как выглядел Amazon 10 лет назад:

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

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

В последние месяцы все чаще слышно о «Fluent Design» от Microsoft. Говорят, он нацелен на интеграцию большей визуальной глубины и движения. То же самое касается экспериментальной операционной системы от Google с кодовым названием «Fuchsia», в которой разработчики пытаются обойтись без рабочих столов и иконок.

Каково, по-вашему, будущее UI-дизайна? Поделитесь своими соображениями!

Данная публикация является переводом статьи «How To Get Started In User Interface (UI) Design» , подготовленная редакцией проекта.

Разработка интерфейсов UX и UI для приложений и корпоративных продуктов

UX дизайн

UX дизайн – это проектирование интерфейса на основе исследования пользовательского опыта и поведения.

При разработке UX дизайна приложений, мы следуем следующим принципам:

• Простота
• Интуитивность
• Гибкость
• Наглядность
• Предотвращение и устранение ошибок

 

Процесс работы над UX дизайном проходит в несколько этапов:

Исследование

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

Проектирование структуры

Создание разметки рабочей области, активных и неактивных зон; определение количества экранов/страниц и вкладок, их содержания

Написание пользовательских сценариев

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

Постановка задач для разработчиков и дизайнеров

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

UI дизайн

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

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

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

• Создание UI элементов (иконки, кнопки, формы)
• Разработка стилистического решения
• Определение цветовой палитры
• Расположение элементов интерфейса на экране

 

Мы используем современные и эффективные технологии:

• Для разработки дизайна десктопных и мобильных приложений: Java FX, Java EE, JavaServer Faces.
• Для разработки дизайна веб-приложений: React JS.

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

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

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

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

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. Обеспечьте согласованность пользовательских интерфейсов

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

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

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

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

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

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

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

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

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

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

Заключение

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

Разница между UX и UI дизайном

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Основные отличия UX от UI

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

».

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

Как видите, UX и 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 vs.Дизайнеры пользовательского интерфейса, а также типичные повседневные задачи каждого из них. В следующей инфографике мы выделили основные жесткие, программные и передаваемые навыки как для UX, так и для UI-дизайнеров. А в следующих разделах мы рассмотрим основные задачи и обязанности.

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

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

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

• Анализ конкурентов
• Анализ клиентов и исследования пользователей
• Структура продукта и стратегия
• Разработка контента

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

Исполнение и аналитика

• Согласование с дизайнером (ами) пользовательского интерфейса
• Согласование с разработчиками
• Отслеживание целей и интеграция
• Анализ и итерация

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

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

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

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

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

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

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

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

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

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

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

• Расположение
• очков опыта
• Промышленность
• Тип проекта / продукта

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

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

Годовой:

• Заработная плата младшего звена 28–33 000 евро
• Средняя зарплата 38–45 000 евро
• Зарплата старшего звена 50 000–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-дизайн Программа, которую мы предлагаем здесь, в CareerFoundry, подкреплена гарантией работы.Для тех из вас, кто только начинает обдумывать свои варианты, мы составили здесь исчерпывающее руководство по лучшим учебным курсам по UX с рекомендациями о том, что следует учитывать при выборе курса. Вы также найдете много других советов и советов в следующих руководствах:

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

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

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

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

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

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

5. Подведение итогов и дополнительная литература

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

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

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

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

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

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

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

Краткая история

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

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

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

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

В 1963 году Иван Сазерленд разработал Sketchpad, широко известный как первая программа автоматизированного проектирования и появление современных графических пользовательских интерфейсов.Sketchpad использовал световое перо для создания и управления объектами на технических чертежах в режиме реального времени, а также координировал их с графикой на экране. Это был первый шаг к современным системам САПР (автоматизированного проектирования), которые мы знаем сегодня.

К концу 1960-х исследователи из Стэнфордского исследовательского института под руководством Дугласа Энгельбарта разработали онлайн-систему, в которой использовались текстовые гиперссылки, управляемые с помощью мыши. Однако до 1983 года, когда была выпущена Apple Lisa, компьютеры с графическим пользовательским интерфейсом (GUI) были недоступны для отдельных пользователей.И потребуется еще год, прежде чем графические интерфейсы станут широко использоваться на Macintosh 128K в 1984 году.

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

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

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

Хороший пользовательский интерфейс — это…

1. Clear: Интерфейс понятен и никогда не бывает чрезмерно приукрашенным или избыточным.Ясность на каждом экране.
2. Интуитивно: Он предоставляет пользователю все, что ему нужно, в тот момент, когда это нужно.
3. Структура: Она продумана до мелочей, связанные элементы сгруппированы в целенаправленную структуру. Элементы четкие, последовательные и узнаваемые.
4. Адаптивный: Пользователь видит четкие изменения состояния как при успешном, так и при неудачном выполнении его действий. Это можно применить даже к микровзаимодействию с помощью анимации кнопок или обратной связи в полях ввода.
5. Согласованный: Он должен повторно использовать поведения и компоненты, которые позволяют пользователю полагаться на его шаблоны.
6. Гибкость: Это должно снизить стоимость ошибок и проактивно предотвращать ошибки. Он также должен быть терпимым и изящно обрабатывать различные типы ситуаций.

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

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

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

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

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

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

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

1. Закон ясности

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

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

Тогда Google решил «упростить» и переместить все за абстрактный значок. Результат? Большинство людей никогда не замечали значок, и Gmail начал получать поток запросов в службу поддержки.

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

2. Закон преимущественного действия

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

Посмотрите на экран Twitter выше. Как вы думаете, понимают ли новые пользователи, что они должны делать?

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

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

3. Закон контекста

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

Как вы редактируете свое имя на Facebook? Вы переходите к настройкам в правом верхнем углу, щелкните Параметры учетной записи, найдите Имя и щелкните Изменить . Как вы делаете то же самое в LinkedIn? Вы щелкаете карандашом рядом со своим именем.

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

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

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

4. Закон неплатежей

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

Видео: danielgill6 (через YouTube)

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

Значительные значения по умолчанию:

• У большинства людей на телефоне есть фон и мелодия звонка по умолчанию.
• Большинство людей (включая вас) никогда не меняют заводские настройки на своих телевизорах.
• Большинство людей никогда не изменит температуру холодильника по умолчанию.

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

5.Закон управляемого действия

Пользователь, вероятно, что-то сделает, если его попросят.

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

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

Урок: если вы хотите, чтобы пользователи что-то делали, спрашивайте их без колебаний.

6. Закон обратной связи

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

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

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

7. Закон ослабления

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

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

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

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

Законы или правила?

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

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

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

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

Мир — это наш интерфейс — эволюция дизайна пользовательского интерфейса

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

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

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

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

Эпоха машин

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

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

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

Эпоха программного обеспечения

Программному обеспечению

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

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

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

Рабочая станция Xerox Star представила первый коммерческий графический интерфейс пользователя (GUI) в 1973 году. Обратите внимание на меню «гамбургер», которое сейчас широко используется в мобильных пользовательских интерфейсах.

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

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

Apple, как известно, возглавила эту тенденцию под руководством Стива Джобса. Только после того, как Джонатан Айв стал более влиятельным в Apple, скевоморфный дизайн постепенно превратился в «плоский» стиль, отмеченный выпуском iOS7 в 2013 году.Мир был готов перейти к менее буквальным подсказкам и теперь мог оценить простоту минималистичного интерфейса.

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

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

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

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

Прикосновение ориентировано на человека

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

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

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

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

получили цену

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

Но, как знает любой достойный UX дизайнер, очевидность и очевидность всегда побеждают.Среди UX-дизайнеров есть поговорка: «Если люди не могут найти его, значит, его не существует».

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

Проблема усугублялась ожесточенной конкуренцией между Android и iOS, где iOS изначально лидировала и значительно сократила свои рекомендации по человеческому интерфейсу.Простота выглядела красиво, но дизайнеры скрывали уродливые или сложные компоненты, которые часто усложняли использование интерфейсов. Android имитировал многие из худших вещей, реализованных Apple, и только после того, как был представлен Material Design, согласованность пользовательского интерфейса стала стандартом в дизайне Android.

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

Пользовательский интерфейс похож на шутку. Если вам нужно это объяснять, это не так уж и хорошо. Мартин Леблан, iconfinder.com

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

Сенсорные интерфейсы

работают только на достаточно больших экранах

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

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

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

Force Touch, технология, впервые представленная в 2014 году во время представления Apple Watch, была также развернута на iPhone 6-го поколения и быстро распространилась на все типы устройств.

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

снова эволюционирует, чтобы имитировать древние подходы

Следующий уровень эволюции дизайна пользовательского интерфейса показывает, как все проходит по кругу. Apple Pencil — это как аппаратная, так и программная технология в лучшем виде, помогающая пользователям рисовать и писать в цифровой сфере.В то время как Apple Pencil превратил эту идею в мейнстрим, не так давно (2007 г.) Джобс сказал знаменитую фразу: «Кому нужен стилус?» перед тем, как представить технологию multi-touch в iPhone.

Стив Джобс высказал мнение об удобстве использования и сложности использования такого маленького стилуса на маленьком экране мобильного устройства; в итоге это не сработало для Microsoft. Большинство ранних устройств Windows Mobile поставлялись со стилусом, и основной технологией сенсорного ввода были резистивные сенсорные экраны, которые часто требовали стилуса для ввода.Инструменты не подходили для того времени, вынуждая людей использовать устройство, похожее на ручку, для управления мобильным пользовательским интерфейсом. Это не казалось естественным.

Когда портативные экраны стали больше, пришло время использовать отдельный гаджет для ввода (рисования и рукописного ввода), который напоминал ручку. Это причина, по которой Apple Pencil дебютировал на iPad Pro увеличенного размера вместо меньших 9,7- и 7,85-дюймовых моделей.

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

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

Выходя за рамки сенсорного управления — VUI

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

Голосовые пользовательские интерфейсы помогают улучшить все виды пользовательского опыта, и некоторые считают, что к 2020 году голос будет обеспечивать 50% всех поисковых запросов.

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

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

Чтобы окружающий мир стал пользовательским интерфейсом, компания Google Advanced Technologies and Projects (ATAP Lab) разработала Project Soli, новую сенсорную технологию, которая использует миниатюрный радар для отслеживания движения руки человека.Благодаря бесконтактным жестам взаимодействия ощущаются физическими и отзывчивыми, потому что обратная связь создается тактильным ощущением касания пальцев друг друга.

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

Как дизайнеры будут проектировать для мира «окружающего интеллекта» с поддержкой ИИ? Каковы последствия для будущей эволюции дизайна пользовательского интерфейса?

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

• • •

Дополнительная литература в блоге Toptal Design:

Понимание основ

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

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

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

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

Почему так важен дизайн пользовательского интерфейса?

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

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

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

Кто изобрел UI?

В 1981 году Алан Кей, Дуглас Энгельбарт и другие исследователи из Xerox PARC разработали первый пользовательский интерфейс, который в то время назывался GUI.В 1983 году Apple представила Lisa, первый компьютер с графическим интерфейсом пользователя — важный момент в эволюции пользовательского интерфейса, поскольку Lisa также был первым компьютером, разработанным для личного использования.

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

Дуглас Энгельбарт, которого часто называют отцом графического интерфейса, работал с Аланом Кей и другими исследователями в Xerox PARC над разработкой первого графического пользовательского интерфейса (GUI). Представленный в 1981 году, он стал поворотным моментом в эволюции пользовательского интерфейса.

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

Развитие пользовательского интерфейса охватывает более 50 лет.Первоначально известный как GUI (графический пользовательский интерфейс), первым персональным компьютером, который использовал современный графический пользовательский интерфейс, был Xerox Alto, разработанный в 1973 году. Он не был коммерческим продуктом и предназначался в основном для исследований в университетах.

20 наиболее важных принципов дизайна пользовательского интерфейса для UI Designer

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

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

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

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

Принцип 1: Четкость

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

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

Принцип 2: Дизайн, ориентированный на пользователя

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

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

Принцип 3: KISS (Keep It Simple And Stupid)

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

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

Принцип 4: Последовательность

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

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

Принцип 5: Сильная визуальная иерархия

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

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

Придать больший визуальный вес первичной информации

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

Вторичная информация всегда должна оставаться вторичной.

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

Третичная информация не требует особого внимания

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

У нас есть больше золотых советов и примеров для создания визуальной иерархии в дизайне веб-сайтов.

Принцип 6: Сделайте интерфейс читабельным

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

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

Принцип 7: Цвет имеет значение

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

Разумно используйте цвет в дизайне пользовательского интерфейса. Цвет может отражать индивидуальность бренда и даже влиять на решение о покупке. Хорошо продуманная цветовая схема — это половина успеха эффективного и красивого интерфейса.

Принцип 8: Сделайте ваш контент доступным для сканирования

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

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

Принцип 9: Обратите внимание на детали

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

Принцип 10: Отвечайте пользователю

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

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

Принцип 11: Обеспечение эффективного пользовательского ввода

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

Принцип 12: Безопасность — это все

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

Принцип 13: Повышение эффективности

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

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

Принцип 14: Будьте дружелюбны к людям

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

Принцип 15. Направленные сигналы

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

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

Принцип 16. Обратная связь

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

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

Принцип 17: Взаимодействие

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

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

Принцип 18: Хорошо организованный макет

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

Хороший макет снижает когнитивную нагрузку (усилия, которые пользователи должны тратить на взаимодействие с вашим пользовательским интерфейсом).Есть 9 идей макета веб-сайта вы можете организовать все элементы на своем веб-сайте или в веб-приложениях.

Принцип 19: Подчеркните важные элементы

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

Принцип 20: Тщательно следуйте принципам дизайна

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

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

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

Микия Кобаяши

Микия Кобаяши — студия, принадлежащая японскому дизайнеру мебели. Его веб-сайт представляет собой портфолио, в котором представлена ​​мебель.

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

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

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

Medium

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

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

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

Klipfolio

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

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

Tinker Watches

Tinker Watches — это интернет-магазин часов. Взаимодействия и переходы потрясающие, и они могут наладить связи с пользователем.

Makeup

Makeup.com — это веб-сайт о макияже. Опция поиска может помочь пользователю найти то, что он хочет.

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

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

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

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

2. Требуется ли кодирование для дизайна пользовательского интерфейса?

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

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

У дизайнеров и разработчиков разные задачи в команде. Доверьте техническую работу разработчикам.

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

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

Средство проектирования передачи обслуживания — iDoc

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

Mockplus iDoc — это инструмент, когда вам нужно передать дизайн. Он позволяет передавать ваши каркасы и визуальный дизайн из Photoshop, Adobe XD и Sketch вместе со всеми автоматически созданными ресурсами дизайна (фрагменты кода, спецификации, ресурсы, руководства по стилю) разработчикам.

Инструмент дизайна интерфейса — Sketch

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

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

Инструмент для дизайна движений — AE

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

Каркас / прототипирование — Mockplus

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

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

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

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

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

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

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

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

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

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

1. Поместите пользователя в центр

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

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

2. Стремление к ясности

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

3. Минимизируйте действия и шаги на экране

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

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

4. Простота

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

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

5. Будьте последовательны

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

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

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

Дизайн-система — отличный способ обеспечить единообразие дизайна пользовательского интерфейса.

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

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

7. Предоставьте полезную обратную связь

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

Обратная связь помогает ответить на вопросы в четырех областях:

1. Расположение: Вы здесь.
2. Статус: Что происходит? Это все еще продолжается?
3. Будущий статус: что дальше?
4. Результаты и результаты: Эй, что случилось?

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

8. Снижение когнитивной нагрузки

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

• Действия и информация с фрагментами. Большинство людей могут обрабатывать семь плюс-минус два фрагмента информации при их обработке.Например, разделение телефонных номеров обычным способом 3-3-4, а не 10-значной последовательностью, приводит к меньшему количеству ошибок.
• Запомните правило трех щелчков мышью — для поиска информации не требуется более трех щелчков мышью.
• Минимизируйте отзыв в пользу распознавания — общие изображения и значки в контексте помогают пользователям определять функциональные возможности, думать о корзине и звонке. значки (обычно используются для уведомлений) и другие часто используемые значки, которые запускают уже существующую память. Это также означает, что не следует брать широко используемый значок, который понимает большинство людей, а затем использовать его для обозначения чего-то еще, вы просто запутаете людей.

9. Сделайте его доступным

Дизайн пользовательского интерфейса должен учитывать проблемы доступности. В сети это часто означает обеспечение доступа к продукту и его использования для лиц с нарушениями зрения. Не забывайте и о дальтонизме. Примерно 1 из 12 мужчин (это примерно 8%) и 1 из 200 женщин (примерно 0,5%) в той или иной степени страдают дальтонизмом. Используйте цвет, чтобы подчеркнуть и подчеркнуть, но не полагайтесь исключительно на цвет для передачи информации.

10. Включите отзывы пользователей в пользовательский интерфейс

Не создавайте дизайн в вакууме.Тестируйте и проверяйте варианты пользовательского интерфейса, собирая отзывы пользователей. Наблюдайте, как пользователи пытаются использовать ваш дизайн (без обучения). Они сбиты с толку? Могут ли они легко достичь желаемого результата? Делайте это как в процессе проектирования, так и постоянно оценивайте после запуска (тепловые карты — один из способов отследить, насколько эффективен пользовательский интерфейс).

11. Гибкость

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

12. Визуальная структура

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

13. Диалоги должны завершиться

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

14. Обеспечьте четкий следующий шаг

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

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

No related posts.