Принципы веб-дизайна интерфейса пользователя. Дизайн интерфейсов что это


URD Дизайн интерфейсов

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

Дизайном интерфейсов в URD занимаются UI/UX дизайнеры. Это отдельная специализация. Приятный интерфейс, улучшенная юзабилити, упорядоченность информации, цветовые решения… В общем, всё, чтобы на сайте было удобно и красиво работать, а в результате, увеличивалось количество пользователей  – это зона ответственности UI/UX дизайнеров.

Изучение задачи

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

Дизайн и прототипы

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

Разработка

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

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

urdglobal.com

Как стать дизайнером интерфейсов – Дизайн-кабак

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

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

Что ему нужно?
Хороший дизайнер думает сценариями, а не экранами.

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

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

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

Системность в дизайне

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

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

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

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

Даже хорошую идею легко убить

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

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

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

Книги для дизайнеров

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

Никакие.

Лишь регулярная практика и понимание бизнеса помогли мне приносить компании большую пользу и повысить свою ценность на рынке.

Идем дальше.

Куда устроиться

Есть три популярных варианта: студия, продукт или стартап.

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

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

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

designpub.ru

организация информации в дизайне интерфейсов

Как 5 шляп могут сделать данные понятными пользователю

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

Среди множества способов отображения данных один выдержал испытание временем и оказался эффективным даже сегодня. Этот принцип называется «Пять шляпных полок» (Five Hat Racks).

Концепция «Пяти шляпных полок» была первоначально разработана Ричардом Солом Вурманом в его книге Information Anxiety. Позже он написал книгу «Information Architect», где он пересматривает концепцию «Пяти шляпных полок», чтобы сформировать принцип LATCH.

«Информация может быть бесконечной, однако… Организация информации ограничена, поскольку может быть организована только с помощью LATCH: Местоположение (Location), Алфавит (Alphabet), Время (Time), Категория (Category) или Иерархия (Hierarchy).» — Вурман, 1996

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

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

Давайте взглянем на 5 способов организации информации.

Определенное местоположение

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

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

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

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

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

Когда это использовать?

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

В сочетании со способом организации по принципу «Время» мы можем самым удобным образом отобразить нужные пользователям ответы.

Алфавит

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

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

Источник / Yao LiuМы все использовали этот метод и знаем, что так как пользователи знакомы с алфавитом, этот метод организации данных эффективен.

Когда это использовать?

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

Время

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

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

Приложение прогноза погоды от Javi PérezОрганизация по времени позволяет легко отслеживать изменения и сравнивать их. Это лучший способ документировать историю, поскольку мы, люди, воспринимаем время линейным образом.

Когда это использовать?

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

Категория

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

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

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

Когда это использовать?

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

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

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

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

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

Иерархия или континиум

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

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

Размер футболки от Dann Petty

Когда это использовать?

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

Ношение 5 шляп

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

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

Мысли в заключение

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

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

Эта статья была вдохновлена книгой «Универсальные принципы дизайна» пера Уильяма Лидвелла.

Призыв к действию

Спасибо за внимание! Пишите мне в LinkedIn и Twitter.

Другие принципы дизайна

ux.pub

Принципы веб-дизайна интерфейса пользователя | Блог | Разработка и дизайн сайтов и мобильных приложений

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

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

1. Знайте своего пользователя

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

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

2. Используйте уже известные модели

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

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

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

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

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

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

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

5. Предоставляйте фидбек и защищайте пользователя от случайных действий

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

6. Не показывайте все элементы управления сразу

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

7. Предоставляйте больше возможностей опытным пользователям

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

8. Не показывайте пользователю пустую страницу

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

В своей книге «Don’t Make Me Think» Стив Круг утверждает: интерфейс должен быть самодостаточным и объяснять сам себя. Если чтобы понять, как пользоваться навигацией, нужна инструкция, — на лицо пример плохого UI.

9. Не усложняйте

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

10. Тестируйте

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

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

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

Поэтому на «тяжелых» сайтах важная информация размещается слева, там, где ее ожидает увидеть пользователь. Этот паттерн используют CNN и New York Times.

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

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

Мы, студия stfalcon.com, разрабатываем пользовательские интерфейсы для MVP, сайтов и мобильных приложений и с удовольствием создадим UI, который будет радовать ваших пользователей.

Работать с нами!

Об авторе

Руководитель отдела дизайна

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

Похожие статьи

Вернуться к списку записей К списку записей

stfalcon.com

Дизайн интерфейса

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

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

Например, Джеф Раскин дает следующее определение интерфейса: «То, как вы взаимодействуете с продуктом – что вы делаете и чем отвечает вам система – и есть интерфейс».

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

К чему все эти определения?

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

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

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

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

Поделитесь со своими друзьями

awesome-design.com

Хороший дизайн интерфейсов. Часть 3

Это третья часть переведённых заметок «Good User Interface». Первые 16 частей уже ранее перевели наши коллеги из ADV на Хабре, а вторые 11 перевели мы.

Идея 28

Используйте варианты по-умолчанию, не заставляя людей выбирать

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

Идея 29Используйте традиционные идеи и не пытайтесь изобрести колесо

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

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

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

Идея 31Используйте визуальную иерархию вместо однообразности

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

Идея 32Группируйте взаимосвязанные элементы, а не разбрасывайте их

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

Идея 33Мгновенная проверка, вместо отложенных ошибок

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

Идея 34Используйте свободный ввод данных, вместо строгого

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

Идея 35Используйте срочность вместо неопределённости

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

Идея 36Используйте ограниченность вместо изобилия

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

Идея 37Дайте пользователю выбор, не заставляйте вспоминать

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

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

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

Это перевод советов проекта под названием "Good UI" от Jakub Linowski. Перевели в компании UXDepot с одобрением автора.

Это третья часть переведённых заметок «Good User Interface». Первые 16 частей уже ранее перевели наши коллеги из ADV на Хабре, а вторые 11 перевели мы.

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу [email protected], пожалуйста :)

Автор: DezmASter

Источник

www.pvsm.ru

Я хочу стать проектировщиком интерфейсов — что дальше? - SkillsUp

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

Джон Лакс о том, с чего начать проектирование интерфейсов и что в этом деле главное

Джон Лакс -UX-дизайнер, соучредитель Teehan+Lax

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

Но для экспериментов вам понадобится база. Я считаю, что хорошее фундаментальное образование необходимо. Мне очень нравятся мультидисциплинарные программы в Hyper Island. Я слышал действительно много хорошх отзывов о Rochester Institute of Technology. Хотя я не очень люблю конференции и редко их посещаю, думаю, что новичкам для расширения кругозора можно ходить иногда, например, на The Smashing Magazine Conferences и Future of Web Apps. Но всё это, конечно, не сделает из вас талантливых UI или UX дизайнеров. Самое главное — видеть и осознавать разницу между «хорошим» и «плохим» интерфейсом. Хороший интерфейс —  тот, которым люди пользуются. Есть много эстетически красивых интерфейсов, но никто ими не пользуется — зачем они тогда нужны? Для дизайнера важно держать перед глазами данные, чтобы понимать, как они вписываются в UI. Проектируйте инстинктивно, но всегда сверяйтесь с реальными данными.

Антон Уткин о взаимодействии живой и неживой природы, об умении видеть будущее и инструментах проектирования интерфейсов

Антон Уткин -Футуролог, проектировщик интерфейсов, СТО Thalient Interfaces

Интерфейс — это взаимодействие. Люди, которые занимаются разработкой интерфейсов, разрабатывают принципы взаимодействия какой-то системы (не обязательно компьютерной) и человека — неживой и живой природы. Это не новая специальность, но на поверхность общественного сознания она начала всплывать с появлением персональных компьютеров. Стартовой точкой существования UI/UX design, как отдельной профессии, принято называть разработки лаборатории Xerox PARC в калифорнийском Пало-Альто, где в 70-е изобрели первый графический интерфейс пользователя и компьютерную мышь. Однако в массы эти продукты пошли десятилетием позже, так что проектирование интерфейсов — это во многом предугадывание будущего, довольно специфическое занятие на стыке дизайна, инженерных специальностей и психологии.

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

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

Наши основные инструменты в работе — OmniGraffle Pro для прототипирования и Adobe Illustrator для рисования; в ближайшее время мы задействуем и входящий в моду Sketch.app. Мы, конечно же, поигрались в специальные сервисы и инструменты и продолжаем это делать, но в какой-то момент пришли к пониманию, что чем специальней инструмент, тем удобнее с его помощью решать какую-то одну задачу (например, спроектировать интерфейс приложения для iOS), но тем он бесполезней для решения других задач, возникающих по ходу работы. Ведь зачастую нужно спроектировать интерфейс, которого ещё нет в природе, приходится придумывать много вещей, которых ещё нет. Инструментов для их создания тоже нет.

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

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

Пётр Моргорский - UI-дизайнер, рт-директор в «Гиперболоид»

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

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

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

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

Где учиться

Hyper IslandЗнаменитая школа с экспериментальным подходом к обучению.

RITВедущий институт США в сфере подготовки кадров для индустрии изобразительных технологий.

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

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

Мастер-класс Антона Уткина Мастер-класс Антона Уткина по скоростному проектированию и прототипированию проектов и продуктов. Будет проводиться регулярно.

Курс Ильи БирманаТрёхдневный практический курс Ильи Бирмана, проектировщика интерфейсов и арт-директора «Дизайн-бюро Артема».

Brainwashing Интенсивный курс «Интерфейсы для айфона» от Brainwashing.

HackDay Экспресс-курс по проектированию интерфейсов в школе HackDay в Санкт-Петербурге.

CourseraНа Coursera есть множество бесплатных курсов, например, Стэнфордский курс Human-Computer Interaction, Gamification, Design: Creation of Artifacts in Society и др.

Что читать

A Book Apart books 

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

Джеф Раскин «Интерфейс: новые направления в проектировании компьютерных систем»

Классика для проектировщиков интерфейсов.

Алан Купер «Об интерфейсе. Основы проектирования взаимодействия» 

Тоже классика,  с более техническим уклоном.

 

Эдвард Тафти «Envisioning Information»  Настольная книга любого визуального дизайнера.

 

Дитер Рамс «As Little Design as Possible» 

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

 

Beautiful Visualization  Романтическая книга, про то, как что устроено и как это можно визуализировать.

 

Куда ходить

Dribbble Meetup

Future of Web Apps

Smashing Conference

Полезные сайты

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

 

Cocoa ControlsНаброски интерфейсов приложений для iOS.

 

NoteloopПодборка футуристических интерфейсов из кино и сериалов.

Usability CountsОдин из лучших блогов про UX-дизайн.

Проектирование интерфейсовГруппа в Facebook с регулярными обзорами статей по теме проектирования интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов.

facebook.com/groups/interface50yearsРусскоязычная группа в Facebook про интерфейсы будущего.

Блог Teehan+LaxОдин из лучших блогов по темеот легендарных Teehan+Lax.

Советы Дизайнер и проектировщик интерфейсов Илья Бирман еженедельно отвечает на вопросы и даёт советы.

Блог Ильи БирманаБлог Ильи Бирмана про интерфейсы.

Источник: www.lookatme.ru/mag/experience/experience-research/196229-razrabotchiki

Получи доступ к мастер-классам топовых спикеров и базе полезных материалов

skillsup.ru