ценность, виды UI и элементы
Кратко: Пользовательский интерфейс — это способ взаимодействия пользователя и программы. Давайте разбираться дальше зачем он нужен 🌿👇
«Хороший пользовательский интерфейс учитывает человеческие слабости, перекладывает работу на машину, минимизирует ошибки и раздражение пользователя». (с) Илья Бирман
Содержание:
- Что такое пользовательский интерфейс
- Зачем нужен интерфейс
- Виды пользовательского интерфейса
- Графический пользовательский интерфейс
- Элементы пользовательского интерфейса
- Модель пользовательского интерфейса
- Этапы разработки пользовательского интерфейса
- Требования к качественному интерфейсу
- Что еще почитать на тему интерфейсов
- Вывод и рекомендация
Пользовательский интерфейс — это все, что помогает людям управлять устройствами и программами с помощью голоса, нажатий, жестов, через командную строку и даже силой мысли (такое теперь тоже есть).
Самый популярный вид интерфейсов сейчас — UI приложений.
Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀
Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook
UI (англ. user interface) переводится как «пользовательский интерфейс». UI охватывает не только графический интерфейс, а еще и тактильный, голосовой или звуковой.
Зачем нужен интерфейсИнтерфейс помогает двум объектам понимать друг друга и обмениваться информацией.
Интерфейс — это «язык общения», который понимают оба объекта, которые взаимодействуют друг с другом с целью решить определенный вопрос. 👌
Если каждое приложение или программа, установленная на компьютере, планшете или смартфоне, — это помощник, то интерфейс — это способ общаться (взаимодействовать) с ней, чтобы она помогала в вашем деле на работе и в жизни.
К примеру, у цифровых систем пользовательские интерфейсы бывают графические, голосовые, командной строки, жестовые — все это интерфейсы. Через пользовательский интерфейс мы получаем доступ к новым возможностям, которые дает приложение для обучения, работы, творчества, развлечений.
Также распространены программный, аппаратный, аппаратно-программный интерфейсы. Такие интерфейсы обеспечивают взаимодействие не только между человеком и машиной (устройством), но и между программами, оборудованием или компьютерами:
- аппаратный: соединяет друг с другом два объекта, например, помогает подключить смартфон к ноутбуку с помощью WiFi или кабеля;
- программный (API): создает связь между приложениями/программами, к примеру, подключение API одного приложения к другому. Самый популярный сценарий работы — авторизация через соцсети на сайтах;
- аппаратно-программный: комбинация технических элементов под управлением программного обеспечения.
Пользовательские интерфейсы бывают жестовые, тактильные, голосовые, графические, командной строки и даже нейронные.
Интерфейс командной строки и текстовый интерфейс (Command Line Interface или CLI)
Командная строка все еще очень популярна среди системных администраторов и программистов. Это один из первых методов взаимодействия с компьютером. Она обладает особым шармом — создает ощущение общения тет-а-тет с машиной без посредников. Командная строка — как бесконечный лист A4, на котором пользователь вводит текст команд и получает результаты работы в виде текста.
Графический пользовательский интерфейс (Graphical User Interface или GUI)
Самый популярный тип UI. Представляет собой окошко с различными элементами управления. Пользователи взаимодействуют с ними с помощью клавиатуры, мыши и голосовых команд: жмут на кнопки, тыкают мышкой, смахивают пальцем.
Жестовый, голосовой, тактильный, нейронный
«Любая достаточно развитая технология неотличима от магии», — как-то сказал английский писатель-фантаст и футуролог Артур Кларк.
Например, через Voice User Interface вы можете отдавать команды своему смартфону через голосовых помощников: Siri от Apple, Alexa от Amazon или Алиса от Яндекса.
NUI (жестовые, естественные) применяют в играх для приставок Xbox, Nintendo Wii или PlayStation. Эту же технологию вы найдете в оборудовании «умного дома», например, при включении света или регулировании громкости Яндекс.Станции с помощью изменения положения руки.
Производители качают технологии и расширяют возможности машин, и наслаждаться новыми фишками гаджетов можно даже посылая мысли напрямую в компьютер.
Графический пользовательский интерфейсЭтим термином чаще обозначаются UI мобильных и веб-приложений, а также игр и сервисов для развлечений.
Мобильные интерфейсы
Выделяется в отдельную группу SIMP (Screen, Icon, Menu, Pointer). Подход к дизайну мобильных интерфейсов отличается от подхода к дизайну настольных приложений. Поведение пользователей при взаимодействии со смартфонами отличается от работы на компьютере из-за размера экрана и отсутствия отдельной клавиатуры с мышью/тачпадом.
Элементы здесь заполняют экран полностью, а блоки и системы зависят от требований операционной системы.
Дизайн мобильных приложений также зависит от поведенческих паттернов пользователей, например того, как они держат смартфон в руке, какие действия удобно совершать на ходу и т.д.
Веб-интерфейсы
Технологии позволяет создавать полноценные веб-приложения, по функциональности не уступающие настольному ПО: Trello, Google Docs, Twitch, Яндекс.Дзен.
Преимущество таких приложений в том, что их не нужно устанавливать на компьютер — все функции доступны в браузере. Создают такие приложения с помощью JavaScript, HTML и CSS.
Игровой и материальный
Связан с механикой геймплея. Именно в нем лучше всего раскрывается сопровождающая роль интерфейса, так как игрок лучше ощущает, что движется к какой-то цели (например, победить босса и пройти уровень). Интерфейс зависит от игры: кнопки, жесты, движения мыши или взаимодействие с сенсором на экране или 3D интерфейс в VR, нажатие клавиш на джойстике.
Программные продукты призваны увеличивать наши возможности в реальном мире. Каждый продукт — как супергерой, его задача — помочь нам в чем-либо: суперпамять, общение сквозь любые расстояния, максимум развлечений и так далее. Ко всем этим свойствам мы получаем доступ через интерфейсы.
Каждое приложение мы распахиваем в определенном контексте. Контекст подразумевает определенные ожидания от того, как все должно работать. Ожидания основаны на прошлом опыте. При знакомстве с новым продуктом мы бессознательно переносим на него сформировавшиеся ожидания и привычки, которые выстроились в прошлом вокруг другого схожего продукта (или способа решения схожей задачи).
Ментальная модель — это схема в нашей памяти с логикой «объект → принцип взаимодействия → результат». При этом от всех похожих объектов мы ожидаем похожего поведения и результата.
«В основе ментальной модели лежат убеждения, а не факты.
Nielsen Norman GroupЭто значит, что нужно принять то, что пользователи уже знают (или думают что знают) о том, как работает ваш продукт. И взять это в работу».
У каждого интерфейса под капотом находится определенная модель системы, которая призвана помогать пользователю достигать определенных целей.
Например, модель покупки дорогих автомобилей для постоянных клиентов автосалона в мобильном приложении может включать 4 шага: наполнить корзину, оформить заказ, подтвердить заказ, внести оплату.
Модель и Интерфейс тесно взаимосвязаны. Чтобы понять разницу между Моделью и Интерфейсом, задайте вопрос: откуда вообще взялась корзина? Разве клиенты добавляют автомобили в тележку пачками, как в супермаркете? Или все-таки нужна модель не корзины/тележки из супермаркета, а тест-драйва в автосалоне?
Т.е. мы в приложении можем вместо корзины сразу при выборе автомобиля предлагать записаться на тест-драйв или начать оформление покупки (в том числе в кредит).
А теперь задайте вопрос: как часто покупатели дорогого автомобиля готовы менять авто и вписывается ли мобильное приложение в их жизненный контекст?
Выходит, что за любым объектом в реальном мире стоит модель, которая находится в нашем сознании — это наши представления о том, как эта штуковина перед нами должна работать. И эти представления возникают еще до того, как мы дотронулись до нее.
Элементы пользовательского интерфейса, синтаксис и другие особенностиЭлементы интерфейса в GUI реализованы на основе метафор. Метафоры должны быть уже знакомы пользователям или вписываться в их культурный контекст (тогда их можно им обучить).
Метафоры в интерфейсах на базе ментальных моделей
Все элементы интерфейса вместе складываются в единую дизайн-концепцию (метафору). Например, Trello (система для управления задачами) визуально выглядит как доска для управления проектами по SCRUM (метафорично), на ней также можно таскать стикеры из одной колонки в другую.
Trello изначально и придумали программисты, которым очень близка концепция SCRUM.
Популярные элементы интерфейса:
Кнопка, Ссылка, Иконка, Вкладка, Чекбокс, Радиокнопка, Переключатель, Выпадающий список, Ползунок, Поле ввода, Таблицы, Меню.
Интерфейсы конструируют по принципам атомарного дизайна
Атомарный дизайн — это подход к разделению системы любой сложности на части, маленькие элементы — атомы. Атомы можно использовать повторно и комбинировать друг с другом.
Атомы. Мельчайшие частицы, из которых состоит интерфейс: кнопки, поля ввода, чекбоксы, радиокнопки, стили для типографики.
Уровень атомов.Молекулы (группы атомов). Если взять два атома и соединить друг с другом — получится молекула. Например, кнопка и поле ввода.
Уровень молекул.Организмы. Если объединить несколько молекул, получится организм — крупная часть интерфейса.
Например, сквозная навигация в шапке или боковой панели сайта.
Шаблоны. Если объединить организмы друг с другом и создать шаблон — получится интерфейс, предназначенный для решения типовых задач.
Уровень шаблонов.Этапы разработки пользовательского интерфейса — как проработать UIВ международной практике подход к дизайну интерфейсов уже стал стандартом. Процесс по дизайну интерфейсов включает следующие ключевые этапы. В этом блоке я опираюсь на материалы UX Mastery — партнера Interaction Design Foundation, крупнейшего в мире сообщества обучения UX-дизайну.
- Стратегия (Бренд-стратегия и UX-стратегия) — определяет полезное действие, ценности бренда и видение будущего. Стратегия естественным образом влияет на цели проекта по дизайну интерфейсов, критерии достижения целей и приоритет проекта в общем ландшафте высот организации.
- Исследование (UX-исследование) — фаза открытий.
Комплексные проекты включают в себя масштабную работу по пользовательским исследованиям (UX-исследованиям) и анализу конкурентов (бенчмаркинг). Небольшие организации или стартапы могут подойти к исследовательской работе в упрощенном формате и обосновать идею, построенную по принципам минимальной жизнеспособности (Minimum Viable) через интервью, опросы и юзабилити тестирования. Именно на фазе исследований, согласно принципам дизайн-мышления, происходит погружение в образ жизни, пристрастия, цели и барьеры пользователей. Понимание контекста пользователей помогает создавать социально значимые продукты, которые с высокой вероятностью приживутся и начнут развитие на рынке: так они будут казаться интуитивными (ментальные модели) и родными (метафоры). - Анализ (UX-аналитика) — цель анализа в том, чтобы сделать выводы из данных и дать уверенный старт созданию дизайн-концепций. Выводы призваны помочь понять суть происходящего и приступить к проектированию интерфейса.
- Проектирование и прототипирование интерфейсов — на этапе проектирования происходит создание прототипов интерфейсов, их тестирование пользователями и корректировка на основе обратной связи. На этой фазе чаще применяются прототипы с низкой детализацией (Low-fi prototyping), так в них пользователи фокусируются только на функциях и не отвлекаются на бренд-дизайн (уникальную графическую идентичность) и другие визуальные детали.
- Дизайн интерфейсов и Разработка — на этом этапе создается проработанный дизайн, пишется детальный контент, создается вся уникальная графика и начинается совместная работа с программистами.
Базовые принципы можно проследить сквозь 24 года исследований в сфере интерфейсов: c 1987 до 2009 года. Эти принципы работают и сейчас.
Рекомендации по проектированию интерфейсов. Шнайдерман (1987 год) и Плейзент (2009 год):
- Стремитесь к единообразию — элементы дизайна должны легко узнаваться, даже если пользователь встретил ваше приложение впервые.
Создавайте пользовательские интерфейсы приложений интуитивно понятными. Например, не красьте кнопку запуска в красный, если на большинстве сайтов она зеленая. - Обеспечьте одинаковое удобство в использовании — к примеру, в приложении и на сайте элементы пользовательского интерфейса — меню и списки — должны срабатывать одинаково на каждой странице.
- Предусмотрите информативную обратную связь — интуитивный интерфейс реагирует на действия пользователя моментально. Приложение должно наглядно показывать на экране актуальный статус: ожидается ли оплата, взял ли менеджер заявку в работу, доставлено ли сообщение.
- Прорабатывайте замкнутые потоки решения задач — пользователи должны четко понимать, когда они запустили некий процесс и когда они его завершили. Этот принцип хорош в сочетании с наглядными статусами.
- Предотвращайте ошибки — идеальный интерфейс состоит из туннелей, по которым пользователи могут моментально долетать до цели.
Стремитесь к точке, когда пользователи даже не смогут ошибиться на пути к цели. Даже простые шаги и статусы порой могут очень сильно помочь. - Обеспечивайте возможность легкой отмены действия — каким бы продуманным ни был интерфейс, все пользователи — люди, они переживают и ошибаются по разным причинам. Приготовьте сообщения с заботой на случай, если вдруг что-то пошло не по плану. Или просто дайте возможность гарантированной отмены действия. Такой подход поможет уберечь внимание, деньги, время и лояльность клиентов.
- Пусть пользователи чувствуют, что контроль в их руках: интуитивный пользовательский интерфейс — как ложка. Всегда знаешь, чего ждать. Пользователи понимают, что интерфейс — это машина и поэтому ожидают полной управляемости.
- Минимизируйте нагрузку на кратковременную память — создайте ощущение «все под рукой». Тогда пользователи не будут чувствовать, что они что-то потеряли, и у них не будет повода беспокоиться, что ценную информацию или результаты работы нужно обязательно куда-то сохранить или запомнить.
В книге увлекательное и глубокое погружение в мир международных подходов к продуктовому (UX/UI) дизайну. Здесь подробно описаны принципы и подходы к проектированию взаимодействия, а еще дан точный инструктаж, как провести качественные и количественные исследования, чтобы выделиться среди конкурентов и сделать ценный для пользователя продукт. Вам также может пригодиться Обзор книги: основы проектирования интерфейсов →
Интерфейс. Основы проектирования взаимодействия. Подробнее →Вывод и рекомендацияПопробовать себя в роли дизайнера интерфейсов на практике под руководством наставника вы можете на платформе Breezzly. Здесь вас встретят дизайн-проекты во всех популярных инструментах (Figma, Principle, ProtoPie) и на всех видах популярных у клиентов проектов. А полную траекторию обучения UI-дизайну вы можете найти, если загляните в обзор 5 лучших UI курсов →
Хороший пользовательский интерфейс / Хабр
Вольный перевод статьи Якуба Линовски — «A Good User Interface».
Хороший пользовательский интерфейс обладает высокими показателями конверсии и прост в использовании. Другими словами, он хорош как для бизнеса, а так и для людей, которые им пользуются. Ниже вашему вниманию предлагается ряд практических идей, которые вы можете попробовать применить.
Идея 1: Старайтесь использовать макет с одной колонкой вместо многоколоночного
Макет с одной колонкой позволяет лучше контролировать повествование. Он сможет направить ваших пользователей наиболее предсказуемым путем — сверху вниз. Многоколоночный подход допускает риск того, что пользователь может отвлечься от основной цели страницы. Направляйте людей с помощью рассказа с обязательным призывом к действию в конце.
Идея 2: Старайтесь сделать подарок, не завершайте продажу сразу
Дружественный жест, такой как сделать подарок покупателю, именно то, что нужно. Если смотреть глубже, то подарки — это еще и эффективная тактика убеждения, основанная на принципе взаимности.
Как бы очевидно это не звучало, но небольшие знаки признательности окупятся сторицей.
Идея 3: Старайтесь объединять схожие функции и не дробить интерфейс
В ходе работы можно непреднамеренно создать несколько разделов и элементов, которые выполняют одну и ту же функцию. Это обычная энтропия, когда система становится беспорядочной с течением времени. Не используйте разные названия для одинаковых функций, чтобы не увеличивать информационную нагрузку на ваших клиентов. Чем больше фрагментирован пользовательский интерфейс, тем более крутой становится кривая обучения и тем сложнее клиенту вникнуть в суть того, что от него требуется. Проведите рефакторинг пользовательского интерфейса и объедините сходные функции вместе.
Идея 4: Старайтесь использовать социальное доказательство вместо того, чтобы рассказывать о себе самом
Социальное доказательство является еще одной тактикой убеждения, которая позволяет увеличить конверсию.
Рекомендации о вас и вашем предложении могут побудить пользователя к действию, Убедитесь, что данные рекомендации или мнения присутствуют.
Идея 5: Старайтесь повторить главный призыв к действию, вместо того, чтобы показывать его один раз
Повторение призыва к действию больше применимо к более длинным страницам или же используется повторение через несколько страниц. Конечно, вы не хотите, чтобы предложение показывалось 10 раз на одной странице и раздражало людей. Длинные страницы стали нормой и попытка уместить все в первый экран уже не является хорошей идеей. Нет ничего страшного в том, чтобы сделать один призыв вверху страницы, ненавязчиво напомнить в середине и закрепить в конце. Когда люди достигают конца страницы, они останавливаются подумать, что сделать дальше, и тут самое время сделать предложение или завершить сделку.
Идея 6: Старайтесь усиливать различия в стиле между кликабельными и выбранными элементами, а не размывать их
Выразительные средства, такие как цвет, глубина и контрастность, могут быть использованы в качестве надежных маркеров, отражающих фундаментальный язык навигации по интерфейсу: где я, и куда я могу перейти.
Чтобы четко донести эту идею до пользователей, нужно использовать различное визуальное оформление для элементов разного назначения (ссылок, кнопок, выбранных элементов и контента), эти различия должны быть явно выражены, и следует использовать их одинаковым образом во всем интерфейсе.
Идея 7: Попробуйте рекомендации вместо показа равнозначных вариантов
В случаях, когда показывается несколько предложений, выделенная рекомендация продукта может быть хорошей идеей, потому что некоторых людей нужно немного подтолкнуть. Есть некоторые психологические исследования, которые предполагают, что чем шире выбор, тем меньше шансов, что решение вообще будет принято и реализовано.
Идея 8: Попробуйте отмену действия вместо запросов на подтверждения
Представьте, что вы только что нажали на действующую кнопку или ссылку. Отмена действия уважает изначальное пользовательское намерение, позволяя действию произойти сразу, с возможностью отмены. Запросы на разрешения действия, напротив, внушают пользователю, что он или она не знают, что они делают, подвергая сомнению их намерения. Действия человека чаще всего отражают его действительные намерения, и только в редких ситуациях они случайны. Неэффективность и убожество подсказок особенно очевидны, когда пользователи должны выполнять действия повторно, и подсказки будут появляться много раз, снова и снова: это плохой опыт. Попробуйте дать вашим пользователям больше возможностей контроля: отменить действие и не спрашивать подтверждения там, где это возможно.
Идея 9: Объясните, для кого предназначен продукт.
Не пытайтесь адресовать сообщение всем подрядВы четко выделяете свою аудиторию, или обращаетесь ко всем сразу? Эта идея повышения конверсии заключается в том, чтобы ясно объяснить, для кого именно предназначен ваш продукт или сервис. Когда вы обращаетесь к аудитории, выделите определенные признаки ваших покупателей. Это выведет общение с ними на новый уровень и придаст некий оттенок эксклюзива и элитарности. Возможный риск такой стратегии заключается в том, что при объявлении каких-либо ограничений вы можете отсечь часть потенциальной аудитории. В этом случае выручит прозрачность предложения: честность вызывает доверие.
Идея 10: Говорите прямо вместо предположений
Вы можете обратиться к людям с неуверенной дрожью в голосе или можете сказать то же самое уверенно. Если вы заканчиваете каждое предложение вопросительными знаками, используете слова вроде «возможно», «было бы здорово», «вам интересно?» или «не хотите попробовать?», тогда у вас есть все возможности добавить вашему сообщению убеждение.
Идея 11: Больше контраста вместо однородности
Чем более явно и резко выделяются призывы к действию среди остальных элементов страницы, тем лучше будет работать ваш интерфейс, тем он сильнее. Контраст основных целевых действий можно усилить с помощью множества способов. Используя насыщенность, вы можете делать некоторые элементы темнее на фоне светлых, с помощью глубины вы заставляете предметы казаться ближе на фоне остального контента, который выглядит более отдаленным (используйте тени и градиенты). Наконец, вы можете подобрать дополняющие цвета из цветового круга (например, желтый и фиолетовый) для еще большего усиления. Однако не стоит чрезмерно увлекаться: контраст между контентом и основным действием должен быть сбалансирован.
Идея 12: Покажите место происхождения продукта вместо обобщений
Информация о вас, вашем продукте или услуге позволяет выйти на более личный уровень в общении с клиентом.
Хороший способ рассказать о себе – упомянуть страну, штаты или город происхождения. Если вы сможете практически применить данный совет, то отношение к вам станет более доброжелательным. Часто, упоминание о том, где был сделан продукт, является хорошим способом создать ощущение более высокого качества продукта.
Идея 13: Сокращайте количество полей, не спрашивайте слишком много
Люди по своей природе не любят трудоемкие задачи, и это в полной мере относится к заполнению полей формы. Каждое поле, которое требует ответа от пользователя, может спровоцировать его к уходу со страницы. К тому же, не все устройства позволяют быстро набирать текст, особенно трудно это делать на мобильных устройствах. Постарайтесь оставить только необходимые поля, и удалить столько полей, сколько возможно. Если необходимых полей действительно много, то заполнить их будет лучше после отправки основной формы на отдельной странице или при помощи дополнительной формы.
Идея 14: Раскройте все опции сразу
Каждое выпадающее меню, используемое вами, скрывает набор действий, на поиск которых требуется дополнительное усилие. Если эти скрытые опции являются центральными для того, чтобы пользователь совершил необходимое действие, то, возможно, стоит увеличить их приоритет на странице. Попробуйте сделать выпадающее меню для тех опций, которые очевидны и не требуют новых знаний от пользователя: в выборе даты и времени (например, календари) или географического расположения. Иногда пункты выпадающего меню могут работать в тех интерфейсах, действия которых пользователь должен совершать время от времени. Будьте осторожны, используя выпадающие списки для элементов на пути основного повествования.
Идея 15: Предлагайте последовательность вместо страниц с двойным дном
Страницы с двойным дном — убийцы конверсии.
Да, все уже привыкли скроллить длинные страницы, но важно не создать у посетителей ложное ощущение того, что страница закончилась раньше, чем это произойдет на самом деле. Если страница предполагает прокрутку, задайте визуальный или смысловой ритм, который явно укажет пользователю, что дальше есть продолжение. Будьте аккуратны с большими разрывами на местах «сгиба», где может появиться граница экрана (конечно, я имею ввиду условные зоны, поскольку сложно предусмотреть все варианты для разнообразных устройств).
Идея 16: Сохраняйте фокус, не злоупотребляйте ссылками
Нет ничего сложного в том, чтобы расставить побольше ссылок в разных местах страницы в надежде удовлетворить как можно больше нужд потенциальных клиентов. Однако, когда вы создаете повествовательную страницу, предназначение которой в том, чтобы подвести пользователя к определенному целевому действию, подумайте дважды. Не забывайте, что любая ссылка перед основным целевым действием увеличивает риск ухода пользователя со страницы и отвлекает от того, что вы от него ждете.
Следите за количеством ссылок и по возможности соблюдайте баланс между разводящими страницами (с немного большим количеством ссылок) с «тоннельными» страницами с меньшим количеством ссылок и большей конверсией. Чистка от ненужных ссылок наверняка увеличит шансы добраться до важной кнопки.
Дмитрий Калинников, директор департамента проектирования и дизайна ADV/web-engineering
Ильдар Киньябулатов, веб-дизайнер ADV/web-engineering
5 примеров отличного дизайна пользовательского интерфейса (UI) в 2023 году
Все мы знаем, что отличный дизайн пользовательского интерфейса приносит большой успех.
Под большим успехом я подразумеваю ВЕЛИКОЛЕПНЫЙ в том смысле, что вы можете повысить коэффициент конверсии вашего веб-сайта на 200 % благодаря вашим улучшениям в дизайне пользовательского интерфейса, как отчет .
Что такое отличный дизайн пользовательского интерфейса и как дизайнер может его достичь?
В этой статье я попытаюсь объяснить, что делает дизайн пользовательского интерфейса отличным, на примерах из разных форматов и компаний.
Да, я знаю, это звучит как констатация очевидного, но иногда вам, как дизайнеру пользовательского интерфейса, следует снова и снова проверять потребности пользователей. Это не разовая задача — определить, что ваши пользователи могут захотеть увидеть и испытать при использовании вашего цифрового продукта или посещении вашего веб-сайта.
Например, используйте знакомые элементы дизайна для персонажей ваших пользователей. Они в основном используют Instagram? Вы можете использовать аналогичный дизайн для своих иконок.
На самом деле, именно так можно создать интуитивно понятный пользовательский интерфейс.
Пользователи ищут эти три элемента в дизайне:
- Легкое выполнение задачи
- Не тратя на это много времени придерживаться правила KISS .
Нет, не буквальный поцелуй.
Правило KISS означает Будь проще, глупец.
Другими словами, не пытайтесь добавлять в свой дизайн все больше и больше, если они не нужны.
Отличный дизайн пользовательского интерфейса превращает сложное в простое и выглядит глупо, охватывая все сложные функции, работающие в фоновом режиме. Таким образом, он удовлетворяет потребности пользователей, о которых я упоминал выше. Хотя в этой статье я больше сосредоточусь на части удовольствия, я попытаюсь коснуться и некоторых функциональных аспектов.
Кстати, если вас интересуют тенденции в дизайне UI и UX, ознакомьтесь с этой статьей в блоге UG.
Без дальнейших церемоний, давайте посмотрим на замечательные примеры, которые применяли эти правила к своему дизайну или не справлялись в некоторых моментах…
1. АсанаЧто мне в ней нравится?
Asana — продукт SaaS с выдающимся дизайном.
Что делает его выдающимся, так это прежде всего использование анимации в его дизайне.
Источник
Например, единорог появляется на вашем экране, чтобы отметить вас, когда вы выполните задание. Разве это не мило?Вы были бы благодарны, если бы эти анимированные персонажи сопровождали вас во время работы над сложной задачей. Именно так вы можете сделать пользовательский опыт более увлекательным.
Кроме того, великолепный пользовательский интерфейс Asana чрезвычайно прост в использовании и почти не требует предварительной информации.
SourceИ последнее, но не менее важное: дизайн карты обеспечивает лучший визуальный опыт для пользователя.
ИсточникЧто могло быть лучше?
Должен сказать, что даже если его интуитивно понятный дизайн делает его отличным продуктом, у него есть свои проблемы.
Как указывает пользователь на форуме сообщества Asana, вам нужно открыть каждую задачу, чтобы увидеть, есть ли подзадачи под ее заголовком. Другими словами, вы не можете просмотреть детали задач, не щелкнув по ним и просмотрев всю задачу в целом.
Может быть боковая панель для предварительного просмотра подзадач и их исполнителей.Плюс, очень тонкая проблема продукта с точки зрения дизайна — появление кнопок закрытия [X] и [done] одновременно, хотя они функционируют одинаково .
Это хороший пример представления ненужных элементов, которые отдаляют вас от выполнения правила KISS.
2. GumroadЧто мне в нем нравится?
Компания Gumroad решила перейти на новую систему проектирования с 2021 года и с тех пор придерживается ее. Если вы не знакомы с Gumroad, это продукт электронной коммерции для цифровых публикаций, и его дизайн пользовательского интерфейса более чем впечатляет.
Но что такое дизайн-система? Дизайн-система — это база данных компонентов и руководств, которые можно объединить в несколько других приложений и использовать несколько раз. Большинство известных вам крупных приложений, таких как Dropbox, Google и Mailchimp, используют его для повышения эффективности.
Цветовая палитра – это то, что отличает его от других платформ электронной коммерции.
Это как 80-е с их яркими оттенками. Он называется Memphis design, и известен своими смелыми контрастными цветами и абстрактными формами. Вы можете назвать это ретро или винтажом, но в наши дни это работает.
Что могло быть лучше?Множество людей ненавидели новый дизайн Gumroad.
И даже есть видео обжарки для его целевой страницы на YouTube.
Основной причиной такой критики является его устаревший внешний вид и громкий стиль . Я не могу сказать, что согласен с ними, так как я сам немного хипстер, может быть 🤭
Хотя я согласен с тем, что он не полностью соответствует своей бизнес-цели, я все же на стороне смелых цветовых схем, чтобы блистать среди другие.
3. Свободное пространство Что мне в нем нравится?В 2023 году мы все более открыты для разнообразия, и некоторые мобильные приложения, кажется, тоже адаптированы к нему.
Одно из самых известных приложений для улучшения самочувствия и внимательности, Headspace, покоряет мое сердце своим инклюзивным дизайном пользовательского интерфейса и инструментами доступности .
Вы также можете изменить шрифт и цвет текста в приложении, что является большим плюсом.
Но что более важно, Headspace интегрирует VUI (голосовой пользовательский интерфейс) в свой дизайн. По сути, это интерфейс распознавания речи, реагирующий на человеческий голос и превращающий голос в текст.
Что могло быть лучше?Ммм… Иногда ответом может быть «ничего».
Я действительно не могу сказать ничего плохого о превосходном дизайне пользовательского интерфейса Headspace , и мои исследования также пришли к выводу, что он не имеет себе равных с точки зрения сочетания UX и UI. Возможно, вы захотите прочитать эту статью, мне понравилось читать.
4. Привет, понедельник Что мне в нем нравится?Hello Monday — цифровая творческая студия, доказывающая свой успех своей веб-страницей.
Использование пустого пространства делает все элементы более запоминающимися и значимыми.
А интерактивных карточек заставляют пользователя что-то почувствовать, например, прикоснуться к луже и посмотреть, как движутся отражения.
пользовательских иллюстраций и рисунков являются важной частью визуального дизайна и выглядят чертовски хорошо. Это дает нам особый и уникальный опыт в отличие от готового мира элементов дизайна и изображений. Кроме того, это дает подлинную атмосферу, чтобы проводить больше времени на странице.
Что могло быть лучше?отсутствует полоса прокрутки в правой части страницы вопреки ожиданиям. Появляется значок навигации, который не служит моей цели быстро и легко увидеть остальную часть страницы.
Хотя иногда приятно идти против условностей дизайна, я не думаю, что прокрутка вниз с помощью коврика для мыши — это приятно.
5. Дриббл Что мне в нем нравится?
Dribbble — живая и огромная база данных для дизайнеров. Вот почему его дизайн пользовательского интерфейса — это история успеха.
Карточки служат для создания галереи и одновременного просмотра множества произведений прекрасного дизайна.
Также приятно, что вы можете искать по цветовым кодам , чтобы увидеть дизайны с доминирующим цветом.
Что могло быть лучше?Хотелось бы, чтобы карточки были интерактивными. Например, я хотел бы увидеть некоторые детали дизайнера или прочитать о дизайне, когда я натыкаюсь на карточку с моим курсором.
Карточки лучше использовать, если они созданы с учетом интерактивного дизайна .
Ключевые выводыПроцесс проектирования пользовательского интерфейса требует большего, чем просто навыки проектирования или инструменты проектирования.
Вы можете быть хороши в графическом дизайне, но не можете удовлетворить реальных пользователей. Чтобы предотвратить это, UI и UX дизайн работают вместе во всех успешных примерах, которые я упомянул в этой статье.Итак, попробуйте сосредоточиться на пользователе, просматривая идеи дизайна.
Часто задаваемые вопросы
Что такое дизайн пользовательского интерфейса, с примером?Дизайн пользовательского интерфейса или дизайн пользовательского интерфейса — это создание любого визуального элемента, взаимодействия или анимации в продукте или веб-странице, например боковой панели Документов Google и верхней панели инструментов. Кнопки, которые нужно нажимать, тексты, изображения, боковые панели, макеты и ползунки — вот некоторые элементы дизайна пользовательского интерфейса.
Где я могу найти хорошие примеры дизайна пользовательского интерфейса?Dribbble – лучшая веб-страница для просмотра множества и тысяч примеров дизайна пользовательского интерфейса.
Вы можете использовать панель поиска, чтобы найти хорошие примеры в зависимости от вашей отрасли или предпочтительного стиля. Кроме того, вы можете поделиться своим портфолио в качестве дизайнера или нанять дизайнеров высшего уровня на этой платформе. Однако имейте в виду, что его сильно критикуют за то, что он не принимает во внимание дизайн и функциональность пользовательского интерфейса. Так что помните об этом и не забывайте сочетать пользовательский интерфейс и UX для достижения лучших решений.Кроме того, вы можете проверить Awwwards для просмотра целевых страниц с отличным дизайном пользовательского интерфейса, отмеченных голосами дизайнеров и пользователей.
9 лучших примеров дизайна пользовательского интерфейса [Вдохновение 2023 года]
В чем заключается лучший дизайн пользовательского интерфейса? Это впечатляющая цветовая палитра или привлекательный макет? Придерживается ли он соглашений о дизайне пользовательского интерфейса или это старое простое удобство использования?
По-настоящему великолепный пользовательский интерфейс обеспечивает все это и многое другое.
Исключительные пользовательские интерфейсы не только облегчат беспрепятственное выполнение поставленной задачи, но и сделают навигацию пользователя эстетически приятной.Чтобы проиллюстрировать, насколько универсальным может быть хороший дизайн пользовательского интерфейса, мы собрали девять лучших примеров дизайна пользовательского интерфейса, которые обеспечат здоровую дозу вдохновения для вашего следующего проекта. Хотя примеры в этом списке могут иметь разные принципы дизайна и различные функции, все они достигли эффективного дизайна пользовательского интерфейса, который захватывает воображение пользователей, сохраняя при этом удобство использования на переднем плане.
Чтобы напрямую перейти к конкретному примеру дизайна пользовательского интерфейса, используйте это интерактивное меню:
- Dribbble’s card design
- Mailchimp’s usability
- Dropbox’s responsive color system
- Pinterest’s waterfall effect
- Hello Monday’s white space
- Current app’s color palette
- Rally’s dynamism
- Cognito’s custom animation
- Spotify’s color gradients
Ready? Поехали!
Традиционно принимая форму небольшого прямоугольного модуля, заполненного изображениями и текстом, карточки служат отправной точкой для пользователей, чтобы узнать больше о продукте или функции.
Dribbble использует карточки для отображения множества творческих и инновационных проектов, загружаемых на сайт дизайнерами каждый день, что позволяет пользователю получить красочный и эстетически гармоничный обзор.Этот карточный дизайн представляет собой оригинальный подход к представлению работы и привлечению внимания пользователей.
2. Удобство использования Mailchimp
Хотя создание новостной рассылки может быть не тем, что приходит вам в голову, когда вы думаете о хорошем дизайне пользовательского интерфейса, недавно обновленный интуитивно понятный веб-сайт Mailchimp позволяет легко и просто управлять новостной рассылкой.
После недавнего редизайна веб-интерфейс стал чистым, плоским и в основном типографским, а также содержит полезные и визуально приятные руководства для новых пользователей. Чтобы расширить функциональность, Mailchimp включил слегка анимированный указатель, чтобы указать, где щелкнуть. Что не любить?
3.
Адаптивная цветовая система Dropbox Адаптивные цвета — это растущая тенденция в дизайне пользовательского интерфейса, и домашние бренды постепенно внедряют их. Вместо того, чтобы использовать один символический цвет в логотипе бренда, адаптивные цвета позволяют брендам использовать несколько предопределенных цветов или динамическую цветовую систему, которая принимает цвет окружающей среды.
Веб-сайт Dropbox — прекрасный пример того, как адаптивный дизайн — это фантастический способ удерживать внимание пользователей при навигации по вашему веб-сайту. Изучение сайта отправит вас в путешествие, где каждая страница будет иметь свою уникальную цветовую палитру. Тем больше причин купить сам продукт!
4. Эффект водопада Pinterest
Каким был бы пост в блоге, посвященный примерам дизайна пользовательского интерфейса, без намека на культовый пользовательский интерфейс Pinterest? Являясь настоящим пионером в области дизайна карточек, Pinterest сочетает дизайн карточек с каскадным потоком, чтобы предоставить пользователям уникально плавный и плавный опыт.
Придавая каждой карточке легкий оттенок при взаимодействии с мышью, Pinterest разумно улучшил видимость и придал элементам ощущение «кликабельности».
5. Привет, белое пространство понедельника
Когда элементы борются за внимание, ничто не может выделиться. Когда в центре внимания находится один элемент, он может по-настоящему сиять. Окружающие элементы пользовательского интерфейса с пустым пространством позволяют донести сообщение элемента.
Пустое пространство — это то, что домашняя страница творческой студии Hello Monday прекрасно освоила. Благодаря микро- и макропустым местам веб-сайт Hello Monday позволяет пользователю сосредоточиться на одной функции за раз, в то же время предоставляя пользователю кучу смысла.
6. Цветовая палитра текущего приложения
Созданная для подростков, Current — это дебетовая карта, контролируемая родителями, и соответствующее приложение, направленное на продвижение правильных финансовых решений и демистификацию финансовой ответственности.
Имея в виду их ключевую демографическую ситуацию, дизайнеры приложения переопределили жесткий и скучный стереотип финансов с помощью ярких цветов, классных шрифтов и уникальных фонов.Несмотря на сложную тематику, приложение может похвастаться простым и понятным пользовательским интерфейсом, четко определяющим задачи, бюджеты и действия, которые необходимо предпринять
7. Динамичность Rally
Цифровая студия Rally сочетает взаимодействие и анимацию с чистым интерфейсом и деликатным цветовым соответствием, что делает их веб-сайт уникальным. Их динамическая функция «нажимайте на стрелки, чтобы получить больше информации» является одним из самых стильных элементов дизайна на сайте.
Вторя выбору Dropbox, они также выбрали адаптивную цветовую палитру, что делает навигацию по веб-сайту еще более приятной.
8. Пользовательская анимация Cognito
Индивидуальные иллюстрации не только выделяют веб-сайт Cognito среди обычных, но и создают дружественную и привлекательную среду для пользователей.
Забавная иллюстрация может придать веб-сайтам или мобильным приложениям индивидуальность, сделав их более запоминающимися.Чтобы сделать интерфейс еще более заметным, иллюстрации Cognito оживают благодаря сложным движениям. Этот динамизм одновременно привлекает внимание пользователей и с первого взгляда иллюстрирует предложение бренда.
9. Цветовые градиенты Spotify
Ни для кого не секрет, что дизайнеры пользовательского интерфейса предпочитают цветовые градиенты однотонным цветам. Мощные при намеренном использовании цветовые градиенты незаменимы, когда возникает необходимость передать эмоции или выделить определенный элемент дизайна. Помимо обширной музыкальной коллекции, домашний бренд Spotify продемонстрировал эффективное использование цветовых градиентов, которые делают приложение еще более увлекательным в использовании.
Вот и все — девять примеров отличного дизайна пользовательского интерфейса, которые вдохновят вас на следующий проект.
Хотите узнать больше о дизайне пользовательского интерфейса? Ознакомьтесь с этими статьями в нашем блоге:- Как стать дизайнером пользовательского интерфейса (UI): пошаговое руководство
- Востребованы ли дизайнеры пользовательского интерфейса? Вот текущие перспективы отрасли
- 10 примеров прекрасных блогов, добившихся успеха в дизайне пользовательского интерфейса
Что вам следует делать сейчас
Получите практическое введение в дизайн пользовательского интерфейса и создайте свой первый экран приложения с помощью бесплатного, Краткий курс дизайна пользовательского интерфейса для самостоятельного обучения.
Примите участие в одном из наших БЕСПЛАТНЫХ онлайн-мероприятий по дизайну пользовательского интерфейса с отраслевыми экспертами и узнайте о смене карьеры выпускника пользовательского интерфейса Флориана на дизайн продукта.
Станьте квалифицированным дизайнером пользовательского интерфейса всего за 4–9 месяцев с гарантией трудоустройства.
