Основы ux ui: 🎨 Принципы и основы UX-дизайна — Блог Live Typing

Содержание

Бесплатный видеокурс: основы UX дизайна | by Ruslan Sharipov

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой статье речь пойдет про плейлист по основам UX дизайна, который состоит из 21 видео.

За почти 6 часов ты узнаешь про все необходимые (на мой взгляд) основы UX дизайна: что это такое, что нужно уметь, знать, понимать и т.д. 5 часов конечно же недостаточно, но это бесплатный старт в профессию, чтобы понять и разобраться твоё или не твоё. Все видео можно смотреть на скорости 1.25х или 1.5х, чтобы сэкономить время 😉.

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

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

P.S.: я ничего не продаю.

Оглавление

01. Что такое ux/ui дизайн?
6:22
Коротко о двух темах: ux/ui. Первая часть ролика про что такое ux, что такое ux-дизайн и чем занимается ux-дизайнер. Вторая часть ролика про что такое ui, ui-дизайн и чем занимается ui-дизайнер

02. Что надо знать ux/ui дизайнеру?
9:32
В этом видео коротко о том, что должен знать UX UI дизайнер. Какие навыки нужны чтобы стать ux ui дизайнером.

03. Основы юзабилити
5:25
Коротко про то, что такое юзабилити, какие бывают стандарты юзабилити, а также про базовые критерии качества интерфейсов

04. Понимание задачи
8:53
В этом видео про понимание задачи. Также кого звать на общение, какие вопросы задавать и почему понимание задачи важная тема для дизайнера

05. Основы интервью с пользователями и клиентами
9:50
В этом видео о том, как и какие вопросы задавать, чтобы получить правильные ответы при проведении интервью. Бонус: рекомендация классной книги для начала.

06. Дизайн-процесс
10:59
В этом видео поговорим о дизайн-процессе. Почему важно понимать процесс в целом. Расскажу также как обычно бывает без дизайн-процесса и из чего дизайн процесс-состоит

07. Исследования. Основы
12:33
В видео поговорим о том, что такое исследования, какие бывают виды, методы, а также когда их проводить и почему. Как обычно по основам и кратко

08. Персонажи или персоны в ux/ui дизайне
24:42
Главное помните, что персоны надо делать под каждый продукт, проводя сперва обсуждение внутри команды, а затем интверью. Советы: один и тот же персонаж не подходит для разных продуктов. Не плоди персонажей. Не усложняй их создание, а для этого используй только те данные, которые помогут в вашем продукте и/или функциональности, которую вы проектируете.

Чтобы сделать это быстро, тебе помогут 4 главных вопроса. Я также специально не упомянул инструменты, т.к. это не важно.

09. Пользовательские истории — User Story
10:54
В целом, очень простая техника, которую надо записывать, чтобы составить список функциональностей, над которыми вся команда (дизайнеры, разработчики и т.д.) будет работать

10. Карта историй — User Story Mapping
16:26
Эта техника очень простая. Как и сами по себе пользовательские истории. Важно, как и всегда, выработать единое понимание между клиентом и командой разработки (дизайнерами, маркетологами, разработчиками и т.д.)

11. Информационная архитектура
01:04:29
Первые 30 минут по делу, а дальше для занудно. Ставьте на 1.5x или 2x смело.

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

13.

Что такое сценарий использования (Use Case)
15:17
Небольшое видео про юзкейсы со скринкастом, в котором я также покажу как написать юзкейс. Часто встречаются еще формулировки: вариант использования, прецедент использования или сценарий использования.

14. Юнит-экономика, воронка продаж, метрики для дизайнера
09:32
Просто-понятно про то, что надо думать за рамками макетов и пикселей, понимая бизнес: юнит-экономику, воронку продаж и метрики.

15. Пиратские метрики — AARRR
14:14
Понимание фреймворка пиратский метрик или AARRR поможет мыслить за рамками макетов и поможет ставить вопросы и искать узкие места не только в бизнесе, но и в дизайне

16. Юзабилити тестирование
17:03
Тема большая, тема сложная, но на коленке проведенное тестирование твоего дизайна лучше, чем вообще ничего, а также дешевле, чем разработка фичи или продукта. Объясняю в кратце что такое юзабилити тестирование и как это юзабилити тестирование провести.

17. Lean Canvas
23:35
Когда проектируешь новый продукт/фичу или просто хочется донести идею, то можно использовать этот инструмент как базис для гипотезы бизнес-модели.

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

19. Модель Kano и приоритезация
25:47
Как быстро понять то, какая реакция на фичу будет у пользователей? Как приоритезировать? Отвечает Нориаки Кано, а точнее метод за авторством — модель Кано.

20. RICE и ICE приоритезация
09:20
Что делать в первую очередь и как приоритезировать?Отвечают быстрые методы RICE и ICE, которые используют балльную систему.

21. Итоги плейлиста по основам UX
12:22
В этом видео подвожу итоги того, что ты уже должен был посмотреть, а также про менторство, критерии к тебе, про будущие плейлисты и твое портфолио. Самое главное: будь реалистом.

15 правил UI/UX дизайна. Основы и правила UX веб дизайна бесплатно.

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

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

Содержание | Быстрая навигация

1. UX и UI дизайн для пользователей.

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

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

2. Ключевое правило UX. Знайте свою аудиторию.

Исследование привычек и предпочтений пользователей – первый шаг в проектировании сайта.

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

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

3. Вы – не пользователь.

Тестирование с реальными пользователями – важная часть процесса проектирования.

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

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

Скорее всего, люди, которые будут использовать ваш продукт, имеют разное прошлое, разное мышление, разные ментальные модели и разные цели. Другими словами, они не вы.

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

UX-дизайн — это делать предположения, а затем проверять их с помощью тестирования.

4. Адаптируйте UI/UX дизайн для кратковременной концентрации внимания.

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

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

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

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

5. Дизайн UX — это процесс не высечен на камне.

Адаптируйте процесс проектирования к разрабатываемому вами продукту.

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

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

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

6. Создавайте прототип, прежде чем работать с настоящим продуктом.

Этап проектирования цифровых продуктов должен включать этап прототипирования.

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

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

Прототип мобильного приложения в Adobe XD.

7. Используйте реальный контент при разработке.

Избегайте использования Lorem Ipsum и фиктивных заполнителей.

Практически каждый продукт основан на контенте, будь то текст, изображения или видео. Можно сказать, что дизайн – это улучшение содержания. Тем не менее, многие разработчики не принимают во внимание контент на этапе проектирования. Они используют Lorem Ipsum вместо реальной копии и заполнители вместо реальных изображений. Хотя такой дизайн может отлично смотреться на артборде, изображение может быть совершенно другим, если один и тот же дизайн заполнен реальными данными.

8. Делайте дизайн простым и последовательными.

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

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

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

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

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

9. Узнаваемость UI элементов важнее оригинальности.

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

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

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

10. Сделайте UI/UX дизайн удобным и доступным.

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

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

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

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

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

Слабовидящий человек просматривает веб-страницы.

11. Не пытайтесь решить проблему самостоятельно.

Дизайн – это командный вид спорта. Не работайте изолированно.

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

12. Не пытайтесь решить все сразу.

UX-дизайн — это не линейный процесс.

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

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

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

13. Лучше предотвращать ошибки, чем исправлять их.

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

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

14. Информируйте посетителей о ходе их работы на веб-ресурсе.

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

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

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

15. Избегайте резких изменений дизайна.

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

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

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

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

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

Вывод: не бойтесь ошибаться.

Все делают ошибки — это единственный способ чему-то научиться.

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

По материалам сайта: https://xd.adobe.com.

✔️ Что такое Lorem Ipsum?

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

❤️ Что такое 10 эвристик Якоба Нильсена?

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

✔️ Как создать «быстрое прототипирование»?

Использовать для этого специальные инструменты и веб-ресурсы.

❤️ Как еще можно получить пользовательский опыт?

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

❤️ С чего начинать делать UI/UX дизайн?

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

✔️ Что наиболее важно понимать в процессе проектирования UX?

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

✔️ Почему UI важен?

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

Что такое UX? | Урок 1 курса «Основы UX» – UxJournal


Привет. Перед вами — базовых курс UX, который включает 31 основной принцип UX-проектирования — UX Crash Course: 31 Fundamentals.

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

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

Что такое UX?

(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals)

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

Что же я подразумеваю под «хорошим» опытом взаимодействия?

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

Цель UX-дизайнера — чтобы пользователи были эффективными.

Пользовательский опыт — это лишь верхушка айсберга:

Многие ошибочно думают, что под UX подразумевается «a user’s experience», т. е. опыт пользователя. Но на самом деле UX — это скорее процесс проектирования пользовательского опыта.

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

«Делаем» UX:

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

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

А завтра мы узнаем два типа целей в UX, которые должны кардинально поменять ваш дизайн… →

Recommend

И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Nancy Pong и Ринат Шайхутдинов. | UxLab, LLC | Курсы дизайна в Йошкар-Оле

10 золотых правил UI дизайна

Список надежных правил проектирования, которым нужно следовать.

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

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

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

1. Проектируйте для плотности, а не для пикселей

Значения пикселей в 3 или 4 раза больше значений dp (независимые от плотности экрана пиксели)

Если вы не знаете, плотность – это количество пикселей на один дюйм экрана или PPI. Единица измерения «dp» – это сокращение от выражения «независимый от плотности экрана пиксель», иногда можно встретить сокращение «dip».

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

Причина, по которой мы это делаем, заключается в том, что, если мы создадим актив кнопки, например, с разрешением 200 x 50 dp, он будет отображаться 200 x 50 px на экране 160 ppi и 400 x 100 пикселей на экране 320 ppi (в 2 раза больше первоначального размера актива).

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

Например, размеры экрана iPhone XS Max составляют 414 x 896. Но это не пиксели, а количество точек. В пикселях это 1242 x 2688 px. Учитывая это, при проектировании для iPhone XS Max я бы выбрал размер 414 x 896 точек, а затем масштабировал активы в @ 3x.

2. Используйте шаг 8dp

Зачем проектировать с шагом 8? Ну, этому есть простое объяснение. Причина, по которой мы используем магическое число 8, а не 5, заключается в том, что, если устройство имеет разрешение 1,5x, оно не будет правильно отображать нечетное число.

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

Проектируя с шагом 8 на сетке 8-pt ваши дизайны будут выглядеть согласованными. Больше не надо угадывать интервал, и все идеально согласуется с обозначенными вами интервалами.

Если хотите подробнее узнать об этой теме, прочтите эту статью.

3. Уберите линии и рамки

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

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

4. Обращайте внимание на контраст

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

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

Правила доступности веб-контента (WCAG) требуют контрастности не менее 4,5: 1.

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

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

Существует множество причин, по которым определенные элементы считаются стандартными.

Например, если вы создадите кнопку в виде круга и разместите на ней текст «Start Free Trial», то он займет слишком много вертикального пространства.

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

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

6. Используйте цветовой вес, чтобы установить иерархию

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

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

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

7. Старайтесь не использовать больше двух шрифтов

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

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

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

При выборе шрифта найдите семейства, которые имеют различные веса (light, regular, medium, bold, extra bold, а также такие стили, как сжатый, расширенный и курсив). Это даст вам больше возможностей для изучения различных стилей без добавления дополнительных шрифтов.

8. Узнавать знакомое, а не пытаться вспомнить

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

Страницы оформления заказа, почтовые ящики, история поиска, кнопки «Назад» и т. д. являются хорошими примерами.

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

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

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

9. Не замедляйте меня

Полное руководство по правильному использованию анимации в UX

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

«Я хочу двигаться быстро» – Рики Бобби

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

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

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

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

«Многочисленные исследования показали, что оптимальная скорость анимации интерфейса составляет от 200 до 500 мс. Эти цифры основаны на конкретных качествах человеческого мозга. Любая анимация короче 100 мс является мгновенной и не распознается вообще. Между тем, анимация продолжительностью более 1 секунды вызовет ощущение задержки и, следовательно, будет скучной для пользователя» — Руководство по правильному использованию анимации в UX

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

10. Меньше значит больше

Дайте знать, если захотите инвестировать в эту революционную идею

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

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

Прости Yahoo, я должен был это сделать

Одна из моих любимых цитат: «Совершенство достигнуто не тогда, когда нечего добавить, а когда нечего убрать». – Антуан де Сент-Экзюпери

Спасибо за прочтение!

Подписывайтесь на автора на Dribbble и Medium.Пишите ему в LinkedIn.

Основы дизайна UI. Часть 1.. Часть 1 | by МИР

Часть 1

Введение

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

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

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

Фото Alec Tremaine.

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

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

Давайте начнём.

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

Начнём с определения терминов «пользовательский интерфейс» и «дизайн пользовательского интерфейса».

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

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

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

«Дизайн пользовательского интерфейса (UID) или инжиниринг интерфейса — это дизайн UI для программ и устройств, таких как: компьютеры, бытовая техника, мобильные телефоны и другие электронные устройства с акцентом на качество опыта использования. Целью дизайна UI является создание максимально простого и продуктивного взаимодействия с точки зрения достижения целей пользователя (ориентированный на пользователя дизайн).

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

–Wikipedia

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

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

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

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

Фото #WOCinTech Chat. Креативные сообщества Attribution-ShareAlike 2.0 Generic.

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

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

Дизайн взаимодействия (IxD) больше фокусируется на аспекте поведения пользователей. Слово «взаимодействие» относится к предмету дизайна: взаимодействие с цифровыми продуктами, системами или услугами.

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

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

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

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

Якоб Нильсен сказал это в 1997 году:

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

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

Якоб Нильсен, «Различия между веб дизайном и дизайном GUI»

(1 мая, 1997)

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

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

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

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

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

Как вы могли догадаться, процесс создания UI не прост. Мы всё-таки создаём здесь сложный программный продукт.

Вот ключевой вопрос: стоит ли работать непосредственно с кодом или можно отправлять изображения?

Создание личных проектов в HTML и CSS и даже разработка прямо в браузере является для веб дизайнеров обычным делом.

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

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

Демонстрация UI — это как ловить и накалывать красивую бабочку.

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

Доступны десятки продуктов для дизайна UI. Только от вас зависит: какие инструменты и каким образом использовать в своём рабочем процессе. Мы все преследуем одну цель — потрясающий дизайн и потрясающий пользовательский интерфейс.

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

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

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

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

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

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

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

–Nick Disabato, «Cadence & Slang»

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

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

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

Это требует больших знаний и это подразумевает большую ответственность.

Вот несколько советов, которым стоит последовать:

· Будьте себе самым главным судьёй — никогда не отправляйте неполную или несовершенную работу.

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

· Развивайте свои бизнес-навыки и задавайте бизнес-вопросы вместо сверления техническими деталями.

· Будьте честно готовы много работать и помогать бизнесу своих клиентов.

· Подходите к каждой сложной задаче с умом и любопытством.

· Не бойтесь делиться и документировать свои процессы и соображения.

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

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

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

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

О чём волнуется предприниматель? Что на кону? Давайте посмотрим, что выбрал средний самодостаточный предприниматель:

· Придумал крепкую идею продукта, решающего проблемы определённой аудитории (и убедился, что она готова за это платить)

· Достал определённую сумму денег

· Создал качественный и хорошо выглядящий продукт (и оплатил услуги всех вовлечённых сторон)

· Создал маркетинговую компанию для стимуляции продаж (и платит за неё)

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

· Убеждается, что ПО работает бесперебойно, запросы поддержки обрабатываются качественно, а данные клиентов в безопасности

· Заботится о непрерывном движении денежных средств, чтобы своевременно оплачивались банковские счета

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

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

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

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

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

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

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

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

–Дрю Уилсон и Джош Лонг, «Исполнить»

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

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

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

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

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

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

С тех пор я изучала принципы с особой тщательностью и интересом.

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

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

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

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

· Что сейчас произошло

· Где я нахожусь

· Что я могу сделать

· Что произойдёт, когда я это сделаю

· Что только что произошло и т. д. — сбросить и повторить

Ясность идёт бок о бок с простотой.

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

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

Создайте что-нибудь, что хорошо выглядит во всех ситуациях.

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

И затем он используется на старом ноутбуке с низким разрешением экрана вашего любимого дедушки.

Вы должны принять всё это во внимание. Как вы создадите дизайн, выдерживающий этот суровый тест жизни?

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

· Используйте непробиваемую типографику (чёрный на белом, большой, читаемый шрифт)

· Продумайте все возможные случаи с контентом (без контента, мало контента, ужасный контент, странный контент). Нарисуйте самые важные.

· Учитывайте все устройства и разрешения.

· Рассмотрите последствия и недостатки, которые могут произойти в процессе дизайна. Дайте дополнительные предостерегающие комментарии.

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

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

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

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

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

Эти вещи должны быть абсолютно знакомы пользователю:

· Иконки

· Навигация

· Призывы к действию — ссылки, кнопки и т.д. Использует простые, популярные глаголы

· Распространённые цветовые ассоциации: красный для срочного, зелёный для готового и т.д.

· Всё, что связано с обработкой платежей

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

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

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

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

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

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

Структура придаёт вещам доступность, снижая беспорядочность и нагрузку.

Вот что вы можете сделать:

· Ввести чёткую визуальную иерархию, приём самые важные вещи большие и заметные

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

· Соблюдайте согласованность навигации на всех экранах сайта или приложения

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

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

А это всё, чего мы хотим.

Дизайн UI является производственным процессом. Но по своей сути это услуга. И вам платят за обслуживание клиента.

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

Со временем вы отполируете процесс, и он станет отражением части вашей личности.

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

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

Вы думаете: «Конечно, они полезны. Но я знаю, что делаю, и я отлично умею правильно рисовать в Photoshop».

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

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

· Это делает дальнейший дизайн совершенно беззаботным, с акцентом на эстетику

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

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

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

Посмотрите на этот фрагмент вайрфреймов мобильной версии Planscope для Brennan Dunn. Мало того, что вы задаёте основы для будущих точных макетов, но вы также объясняете свой образ мышления клиенту.

Вот во что в итоге превратилось эти вайрфреймы. Превосходные и очень точные макеты было намного проще спроектировать (и подписать).

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

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

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

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

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

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

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

Что ж, открывайте Photoshop и запачкайте свои руки.

Я не рекомендую вам представлять более двух вариантов «стиля на выбор». Одного недостаточно, потому что у клиента просто должен быть выбор, а три варианта делают выбор слишком сложным. Помните о парадоксе Буридана? Бедное мифическое животное умерло от голода, потому что оно не смогло сделать выбор между двумя одинаковыми грудами сена.

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

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

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

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

Почему так происходит?

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

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

–Пол Боаг, Почему нужно задействовать ваших разработчиков в процессе дизайна»

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

Что такое UX/UI дизайн на самом деле? / Хабр

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

Я хочу раз и навсегда поставить точку и простым понятным языком объяснить, что значит «UX/UI дизайн».


Разные типы интерфейсов для заточки лезвий.


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

Цель UI/UX дизайнера — довести пользователя до какой-то логической точки в интерфейсе. Сделать так, чтобы пользователь достиг своей цели.

Что такое UX/UI, прямым текстом

(в этом разделе будут банальные фразы)

UX — это User Experience (дословно: «опыт пользователя»). То есть это то, какой опыт/впечатление получает пользователь от работы с вашим интерфейсом. Удается ли ему достичь цели и на сколько просто или сложно это сделать.

А UI — это User Interface (дословно «пользовательский интерфейс») — то, как выглядит интерфейс и то, какие физические характеристики приобретает. Определяет, какого цвета будет ваше «изделие», удобно ли будет человеку попадать пальцем в кнопочки, читабельным ли будет текст и тому подобное…

UX/UI дизайн — это проектирование любых пользовательских интерфейсов в которых удобство использования так же важно как и внешний вид.

Что такое UX и UI дизайн, другими словами

Прямая обязанность UX/UI дизайнера — это, например, «продать» товар или услугу через интерфейс. Именно на основе работы UX/UI дизайнера пользователь принимает решение: «Быть или не быть?» Нравится или не нравится. Купить или не купить.

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

UX/UI дизайн не относится только к смартфонам и веб-сайтам.

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

Вот первый пример: когда Вильгельм Шиккард в 1623 году изобретал арифмометр, он уже был UX/UI дизайнером.

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

Ещё один более древний и примитивный пример — точильный камень (колесо). Уже даже в раннем средневековье было много разновидностей и механизмов такого колеса:

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

Всё это были разные типы интерфейсов.

Так вот, когда изобретатель очередного точильного камня думал:

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

то в тот момент он был

UX дизайнером

.

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

И тот способ, каким бы вы затачивали меч — назывался бы интерфейс.

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

В последнее время популяризация профессии UX/UI дизайнера связана скорее с развитием цифровых технологий. А вот именно тот «бум» (когда мы стали видеть термин «UX/UI» в каждом втором объявлении о работе) связан с самим названием, которое кто-то придумал совсем недавно.

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

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

Разделение на веб-дизайнеров и UX/UI дизайнеров появилось с развитием интернета. Со временем понадобились более узкие специалисты, которые делали бы интерфейсы именно для веб-сайтов.
Да, UI/UX дизайн — это более широкое и емкое понятие чем веб-дизайн.

P.S.

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

основные понятия дизайна цифрового продукта

В июне 2017 года корреспонденты Теплицы будут подробно рассказывать о двух формах дизайна цифровых продуктов: опыта пользователя (UX – User eXperience) и пользовательских интерфейсов (UI – user interface). Также мы поговорим о дизайн-мышлении, юзабилити сайта, человек-ориентированном дизайне (human-centered design), сервис-дизайне (service design) и посоветуем, как улучшить сайт некоммерческой организации. В этой статье мы разберем основные понятия, которые стоит знать при изучении UX и UI дизайна.

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

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

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

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

UI (User interface) дизайн – узкое понятие, которое включает набор графически оформленных инструментов. Например, кнопки, меню, слайдеры. UI дизайн призван помочь пользователю наладить взаимодействие с сайтом или программой.

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

Термины в UX дизайне

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

2. Контекст анализа использования (Context of Use Analysis) – сбор и анализ подробной информации о потенциальных пользователях. Для этого проводятся интервью, семинары, опросы, работа с фокус-группами.

3. Легко обучаемый (Easy to Learn) – аспект удобства использования. Он призван облегчить пользователям взаимодействие с интерфейсом, при этом потратив минимальное время на его изучение.

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

Еще по теме: 60+ полезных инструментов и ресурсов для дизайнеров

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

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

7. Информационная архитектура (Information Architecture) – процесс организации информации, который включает структуру, дизайн, макет и навигацию. Он позволяет сотрудникам и пользователям находить нужную информацию и управлять ею. Например, информационная архитектура определяет размещение элементов на странице, их навигацию, связь самих страниц.

8. Интерфейс (Interface) – неотъемлемая часть любого продукта. Это объект, среда, набор инструментов, с помощью которых пользователь взаимодействует с готовым продуктом. Например, кнопки, галочки, текстовые поля, подсказки, переключатели на сайте. По сути, интерфейс ведет за собой пользователя.

9. Совместная разработка (Participatory Design) – процесс, в который включены разработчики, представители бизнеса и пользователи. Все они работают вместе для создания решения. Например, разработчики активно привлекают пользователей к процессу проектирования, чтобы быть уверенными в востребованности функций продукта.

10. Плюралистический подход к юзабилити (Pluralistic Usability Walkthrough) – метод тестирования юзабилити, который используется для оценки дизайна на ранней стадии. В этом тестировании участвуют пользователи и разработчики интерфейса.

11. Прототип (Prototype) – первоначальный дизайн интерфейса или продукта, который нужен для получения отзывов от пользователей, участников проекта и заинтересованных специалистов.

12. Раскадровка (Storyboard) – способ иллюстрирования взаимодействия человека и продукта в описательном формате. Раскадровка может состоять из серии рисунков, эскизов и описания к ним. Она рассказывает историю о том, как пользователь тестирует и оценивает продукт.

Термины в UI дизайне

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

2. Каскадные таблицы стилей (Cascading style sheets, CSS) – так называется формальный язык. Он используется для описания внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML. CSS используется, например, для того, чтобы задать шрифт, цвет и расположения отдельных блоков на веб-страницах.

Еще по теме: Александр Христолюбов: дизайн-мышление – методология поиска новых решений

3. Система управления контентом (Content management system, CMS) – программа, которая позволяет совместно создавать, редактировать и управлять контентом на сайте.

4. Анимация (Animation) – моделирование движения путем быстрого появления изображений в последовательности.

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

6. Пустое пространство (Negative Space) – часть страницы, которая не содержит текста или изображения.

7. Метки (Labels) – названия для кнопок и других элементов для навигации по сайту.

8. Путь (Path) – маршрут, который проходит пользователь на веб-сайте.

9. «Что видишь, то и получишь» (What you see is what you get) – это свойство веб-интерфейсов или программ, в которых макет выглядит похожим на конечную продукцию и может быть представлен в виде печатной версии или презентации. Такую функцию выполняют «визуальные редакторы».

Основные термины UX дизайна перечислены в справочнике Usability Body Knowledge, а UI – на образовательном сайте Usability.gov

Основы UX | Основы Интернета | Разработчики Google

Адвокат по дизайну в Google • Материальный дизайн, пользовательский интерфейс и дизайн-спринты

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

Это руководство во многом заимствовано из методологии Design Sprint, команды Google используют для устранения неполадок и решения таких проблем, как Самостоятельное вождение автомобиля и Project Loon.

Двойной алмаз

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

Модель процесса проектирования «двойной ромб», впервые разработанная Британским советом по дизайну, включает следующие этапы проекта; Понять , Определить , Разойтись , Решить , Прототип и Проверить .

Подготовка сцены

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

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

Это несколько реальных примеров продуктов, над которыми я работал в мимо;

  • Разработать систему для управления лечением и последующим уходом за пациентами с косолапость.

  • Создайте приложение, которое упрощает сложные финансовые системы и сокращает их до Основы.

  • Создайте единое мобильное приложение для разных платформ, не жертвуя бренд.

Обновление вашего запроса

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

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

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

Подтверждение проблемы

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

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

Внутренние интервью с заинтересованными сторонами

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

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

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

Lightning переговоры

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

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

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

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

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

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

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

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

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

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

Полевые этнографические исследования

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

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

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

Собираем вместе

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

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

Карта проекта

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

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

Карты проекта отображают основные шаги для каждого пользователя или игрока в потоке.

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

Каркас и раскадровка

Crazy 8s

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

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

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

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

Усовершенствуйте свой дизайн

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

Раскадровка идеи

Раскадровка включает в себя объединение ваших набросков и идей в единый поток.

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

Создание прототипа

Создание прототипа — это не создание идеального фрагмента кода, а создание то, во что можно поверить, когда кто-то его использует. Инструменты, используемые для создания прототип варьируется от человека к человеку. Некоторым нравится Keynote или Powerpoint, так как они заставляет думать о потоке, а не о деталях дизайна. Возможно, вы захотите инвестировать уделите время обучающим инструментам, таким как Balsamiq, Marvel или Framer, которые могут дать вам больше поведенческий контроль. Какой бы инструмент вы ни использовали, убедитесь, что он сосредоточьтесь на потоке и выглядит реально.Прототип нужно протестировать на реальных людях поэтому он должен быть как можно более правдоподобным, но в то же время не должен потребуются недели работы, чтобы создать.

Прототипы должны быть достаточно реальными, чтобы в них можно было поверить.

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

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

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

Раскадровка включает в себя объединение всех ваших набросков и идей в единый поток.

Вопросы, которые нужно задать

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

Вам нужно узнать:

  • Что им нравится в прототипе?
  • Что им не нравится в прототипе?
  • Какие болевые точки?
    • Почему сработал поток
    • Почему не работал поток
  • Что бы они хотели улучшить?
  • Удовлетворяет ли общий дизайн / поток их потребностям?

Пересмотр конструкций и еще один раунд испытаний

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

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

Сделай это!

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

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

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

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

Была ли эта страница полезной?

Есть

Что было самым лучшим на этой странице?

Это помогло мне выполнить мои цели

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

Там была информация, которая мне была нужна

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

Имеет точную информацию

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

Легко читалось

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

Что-то еще

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

Что было хуже всего на этой странице?

Это не помогло мне выполнить мои цели

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

Отсутствовала необходимая мне информация

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

Он имел неточную информацию

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

Трудно было прочитать

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

Что-то еще

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

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

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

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

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

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

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

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

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

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

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

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

Справочник по основам UX для начинающих. Брэдли Найс, менеджер по контенту… | Брэдли Ницца | Уровень повышен!

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

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

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

В основе UX лежит обеспечение того, чтобы пользователи находили ценность в том, что вы им предоставляете. Питер Морвилл представляет это в своей работе User Experience Honeycomb.

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

  • Полезной : Ваш контент должен быть оригинальным и удовлетворять потребности
  • Используемый : Сайт должен быть простым в использовании
  • Желательно : изображение, идентичность, бренд и другие элементы дизайна используются для вызова эмоций и признательности
  • Доступный : Контент должен быть доступен для навигации и поиска на месте и за его пределами
  • Доступен : Контент должен быть доступен людям с ограниченными возможностями
  • Достоверный : Пользователи должны доверять и верить тому, что вы им говорите

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

Источник изображения: Эрик Флауэрс

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

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

Так что же на самом деле делает User Experience Designer? Что ж, нет типичного дня, но есть набор техник, на которые многие UX-дизайнеры полагаются на разных этапах проекта:

Wireframes

Everyday UX

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

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

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

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

Everyday UX

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

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

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

Персонажи

Everyday UX

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

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

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

Сценарии и раскадровки

Повседневный UX

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

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

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

Основы и основы дизайна UI / UX

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

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

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

Что такое взаимодействие с пользователем (UX)?

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

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

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

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

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

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

Итак, как создать хороший веб-сайт?

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

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

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

1. Простое — лучшее

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

2. Разделите свой дизайн по сеткам

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

3. Визуальные элементы, размещенные для привлечения внимания пользователя

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

4. Пробел

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

5. Написание / дизайн контента

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

6. Типографика и удобочитаемость

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

7. Текст с выравниванием по левому краю, текст по центру и текст по правому краю
  • Текст с выравниванием по левому краю — Когда строки текста выровнены по левому краю, они обычно сливаются с левой стороны а справа рваный.
  • Текст с выравниванием по правому краю — Когда строки текста выровнены по правому краю, они ровные с правой стороны и неровные с левой.
  • Выровненный по центру текст- Когда строки текста выровнены по центру, они неровны как слева, так и справа.

8. Навигация

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

9. Эффекты при наведении курсора на кнопку

https: // ianlunn.github.io/Hover/ Необходимо проверять данную ссылку только в том случае, если вы собираетесь добавить кнопку с эффектом наведения на веб-сайтах. Это поможет вам во всем. Он содержит набор CSS3-эффектов наведения, которые можно применить к ссылкам, кнопкам, логотипам, SVG, избранным изображениям и так далее.

10. Время загрузки

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

11. Оптимизация для мобильных устройств

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

12. Основные UX-движения

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

13. Привлекательные шрифты

Здесь, когда вы передаете информацию, она должна быть удобочитаемой. Он должен быть привлекательным в стиле, который напрямую привлекает внимание читателей. Не стоит недооценивать силу выбора правильного дизайна шрифта и глубокое психологическое влияние, которое он оказывает на ваших посетителей. Опытные дизайнеры это понимают и очень тщательно и осознанно выбирают шрифты. Какой шрифт следует использовать при разработке веб-сайта, вы можете увидеть по данной ссылке.https://websitesetup.org/web-safe-fonts-html-css/

14. Эстетически привлекательный

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

15. Дизайн с F-образным рисунком

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

Примечание. Все приведенные выше изображения и GIF-файлы взяты с Google.com

В завершение

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

PS: Если вам понравилось, то любезно поделитесь своими добрыми отзывами в разделе комментариев ниже. А чтобы оставаться на связи и не пропустить ни одной из наших статей / блогов, подпишитесь на нашу новостную рассылку и посетите нашу страницу блога https://blog.paradisetechsoft.com/

PPS : Следите за нами в наших разделах в социальных сетях: Medium: medium.com , Facebook: https://www.facebook.com/ParadiseTechSoftSolution/ , LinkedIn: https://www.linkedin.com/company/3302119/admin/ , GitHub: проверьте из наших последних репозиториев по адресу https://github.com/puneet-kaushal/

Ссылки

15 Best Web Safe Fonts

https : //ianlunn.github.io/Hover/

4 ключевых элемента процесса проектирования пользовательского интерфейса

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

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

1. Поведение

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

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

Некоторые методы и инструменты UX, используемые для изучения поведения пользователей:

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

2. Стратегия

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

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

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

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

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

3. Удобство использования

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

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

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

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

4. Проверка

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

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

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

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

  • Идеи можно проверить на самом раннем этапе процесса, выполнив тест дымовой завесой . Дымовой завесой может быть целевая страница с призывом к действию (например, подпишитесь на мою рассылку!), Чтобы проверить, хотят ли пользователи ваш продукт.
  • Если вы уже находитесь на стадии проектирования, вы можете проверить свой дизайн с помощью A / B-тестирования двух версий одной и той же страницы.Это позволит вам увидеть, является ли один способ решения проблемы более успешным, чем другой.
  • Наконец, вы можете захотеть создать интерактивный прототип или код , чтобы увидеть, как пользователи будут перемещаться по системе по мере того, как вы приближаетесь к запуску.

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

16 важных принципов UX-дизайна для новичков

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

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

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

Хотите узнать больше о том, как стать дизайнером UI / UX? Посетите наше подробное руководство по UI / UX дизайну здесь!

Принципы UX

1.Удовлетворять потребности пользователей

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

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

Квасцы

Springboard и дизайнер UX Джереми Най сказал об этом так:

« Слишком часто я проектировал на острове, делая предположения, основанные на том, что, по моему мнению, нужно конечному пользователю, создавая макеты с идеальным пикселем на основе моих предположений.Я узнал, что «U» в UX не означает «вы»! Все дело в пользователе, поэтому выход за рамки моей головы и взаимодействие с пользователем — важный шаг в процессе проектирования.

(Источник)

2. Знайте, где вы находитесь в процессе проектирования

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

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

(Источник)

3. Иметь четкую иерархию

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

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

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

(Источник)

Теперь рассмотрим реальный пример с сайта WooCommerce:

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

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

4. Сохраняйте последовательность

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

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

5. Доступность

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

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

6. Контекст — это ключ

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

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


(Источник)

7. Сначала удобство использования

Дизайн

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

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

Удобство использования — это причина, по которой заметные кнопки и минималистичный дизайн с небольшим количеством элементов увеличивают рейтинг кликов (CTR). Precision Marketing Group удвоила CTR кнопки с призывом к действию, изменив форму и размер кнопки.

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

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

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

(Источник)

8. Меньше значит больше

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

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

(Источник.)

9. Используйте простой язык

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

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

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

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

Проще говоря: используйте четкие и последовательные слова во всем дизайне, чтобы уменьшить двусмысленность.В этом примере «ОК» неясно. «Да» — более логичный выбор. Понятно? (Хорошо!)

(Источник)

10. Типографика сильна

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

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

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

11. Вопросы обратной связи

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

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

12. Подтвердите перед фиксацией

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

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

13. Пользователь управляет

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

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

(Источник)

14. Дизайн с индивидуальностью

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

Добавление индивидуальности вашему дизайну придает ему человечность, что делает его более привлекательным и удобным (как в блоге Trello).

15. Визуальная грамматика

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

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

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

(Источник)

16. Повествовательный дизайн

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

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

С другой стороны, быстрый темп может завалить пользователя информацией, которая может запутать его. Поэтому нужно балансировать темп и ритм. Посетите веб-сайт Big Apple Hot Dogs, чтобы узнать, как в дизайне используется повествование повествования:


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

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

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

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

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

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

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

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

Начните с инвентаризации интерфейса

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

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

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

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

Брэд Фрост, из перечня интерфейсов

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

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

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

Рассмотрим все по-разному компоненты, составляющие ваш пользовательский интерфейс, в том числе:

  • Типографика
    • Текстовые элементы (первые строки, абзацы)
  • Изображения и мультимедиа
  • Формы

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

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

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

Создайте библиотеку шаблонов

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

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

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

  • Выбор календаря
  • Следы хлебных крошек
  • Карусели

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

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

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

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

Принятие атомарного дизайна

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

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

Примечание на полях: Нам повезло, что ряд дизайнеров приняли эстафету и глубоко исследовали это направление мышления.Книга Брэда Фроста «Атомный дизайн» и книга Аллы Холматовой «Дизайн-системы» изобилуют полезными советами, и их следует обязательно прочитать. Я настоятельно рекомендую их обоих.

Дизайн-системы Аллы Холматовой.

Подчеркивая важность применения методического подхода к проектированию интерфейсов, Фрост заявляет:

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

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

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

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

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

Изображение Брэда Фроста

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

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

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

Авторское право © 2021 Es picture - Картинки
top