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

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

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

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

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

Что такое UI Design?

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

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

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

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

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

Что такое UX Design?

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

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

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

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

Как эти дизайнеры работают сообща?

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

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

Исследование — ключ к успеху

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

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

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

какие дизайна пользовательского интерфейса вы знаете. Смотреть фото какие дизайна пользовательского интерфейса вы знаете. Смотреть картинку какие дизайна пользовательского интерфейса вы знаете. Картинка про какие дизайна пользовательского интерфейса вы знаете. Фото какие дизайна пользовательского интерфейса вы знаете
Tweet by LukeW

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

Исследования в UI-дизайне.

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

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

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

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

Исследования в UX-дизайне

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

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

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

UI и UX: две совершенно разные дисциплины, которые работают в гармонии

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

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

Источник

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

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

Роль UI дизайна сегодня?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Интерфейс: хороший, плохой и ужасный

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

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

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

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

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

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

Плохой интерфейс

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

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

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

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

Ужасный интерфейс

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

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

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

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

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

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

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

Источник

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

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

— Пол Рэнд (Paul Rand)

1. Обязанность интерфейса — обеспечение взаимодействия

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

2. Ясность прежде всего

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

3. Внимание любой ценой

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

4. Под контролем пользователей

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

5. Лучшее управление — прямое управление

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

6. Один экран — одна основная задача

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

7. Второстепенная задача, знай свое место

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

8. Место для шага вперед

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

9. Поведение определяет внешний вид (или «функция определяет форму»)

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

10. Как важно быть последовательным

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

11. Четкая иерархия — всему голова

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

12. Грамотная организация снижает когнитивную нагрузку

Джон Маэда (John Maeda) в своей книге Simplicity пишет, что грамотная организация элементов интерфейса позволяет придать экрану менее загруженный вид. С помощью продуманной организации элементов вы сможете продемонстрировать связи между ними, и освоить такой интерфейс пользователям будет куда проще. Группируйте схожие элементы, располагайте их на экране таким образом, чтобы пользователям стало понятно, как они связаны между собой. Благодаря грамотной организации контента можно значительно снизить когнитивную нагрузку пользователей. Если в самом дизайне будут наглядно продемонстрированы связи между элементами, пользователям уже не придется мучительно в них разбираться! Не заставляйте пользователей лишний раз напрягаться — лучше просто покажите им все эти связи между элементами интерфейса с помощью вашего дизайна.

13. Подсказывай, а не указывай: роль цвета

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

14. Не все сразу

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

15. Подсказывай с умом

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

16. Момент истины: нулевое состояние

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

17. Текущие проблемы — главные проблемы

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

18. Лучший дизайн — невидимый дизайн

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

19. Расширяем кругозор

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

20. Неиспользуемый интерфейс — плохой интерфейс

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

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

Источник

Добавить комментарий

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