20 UX-элементов с открытым кодом


Содержание

Учимся правильно оформлять код на C на примере open source проектов

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

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

Научиться правильному оформлению кода можно, например:

  • из книг и журналов;
  • из руководств в сети;
  • из общения с коллегами;
  • на собственном опыте.

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

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

Давайте посмотрим на пример реализации функции из исходного кода Linux:

Код выглядит чистым и понятным:

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

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

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

Давайте теперь посмотрим на код ядра Linux с помощью CppDepend и попробуем разобраться, какими правилами руководствовались разработчики.

Модульность

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

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

Мы можем использовать два подхода:

  • Положить все исходники в одну директорию
  • Объединить файлы, относящиеся к одному модулю в одну директорию.

В случае с ядром Linux директории и поддиректории используются для обеспечения модульности кода ядра.

Инкапсуляция

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

Давайте посмотрим на статические функции с помощью следующего запроса в CQLinq:

Мы можем использовать панель Метрик (Metric view) чтобы оценить код в целом. На этой панели код представлен в виде дерева (Treemap). Древовидная структура, используемая в CppDepend показывает иерархию кода:

  • Директории в проекте.
  • Файлы в директориях.
  • Структуры, функции и переменные в файлах.

Дерево проекта позволяет наглядно представить результаты запроса CQLinq.

Видно, что множество функций — статические.

Теперь давайте найдем статические поля:

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

Используйте структуры для своих данных

В C функции используют переменные для работы. Переменные могут быть:

  • статическими;
  • глобальными;
  • локальными;
  • полями структур.

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

Давайте найдем все глобальные переменные с примитивным типом:

Их всего несколько, и, возможно, мы могли бы сгруппировать их в структуры, например ( elfcorehdr_addr и elfcorehdr_size ) или ( pm_freezing и pm_nosig_freezing ).

Функции должны быть краткими и понятными

Вот совет из linux coding style по поводу длины функции:

Функции должны быть короткими и понятными, делать только одну вещь. Они должны занимать один или, максимум, два экрана текста (экран по ISO/ANSI имеет размер 80×24). Функция должна делать одну вещь, и делать ее хорошо.


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

Давайте найдем все функции, длина которых больше 30 строк:

Всего немного методов занимает больше 30 строк.

Количество параметров функции

Функции с количеством параметров большим, чем 8 (NbParameters > 8), трудно вызывать. Также, их вызов плохо сказывается на производительности. Вместо этого мы можем передавать в них структуру с необходимыми значениями.

Только два метода принимают больше, чем 8 параметров.

Количество локальных переменных

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

Только в пяти функциях используется более 15 локальных переменных.

Избегайте сложных функций

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

Есть несколько более комплексных метрик:

  • Cyclomatic complexity — популярная метрика, показывающая количество ветвлений в коде.
  • Nesting Depth — is a metric defined on methods that is relative to the maximum depth of the more nested scope in a method body.
  • Max Nested loop — максимальный уровень вложенности в методе.

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

Давайте посмотрим на функции, которые можно упростить:

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

Соглашения об именовании

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

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

Имена только 4 структур начинаются с «_» вместо строчной буквы.

Отступы и выравнивание

Отступы очень важны для того, чтобы код был читаем. Вот что пишут об этом на странице linux coding style:

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

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

Заключение

Чтение кода open-source проектов всегда идет на пользу вашему опыту. При этом нет необходимости скачивать и собирать проект, достаточно просто просматривать код, например, на GitHub.

Коды и библиотеки для наборов «Смарт 10, 20, 30»

Библиотеки

(для уроков 18 и 19)

(для уроков 24 и 25)

Коды к урокам

* Коды и библиотеки, приведенные на данной странице, действительны для 1-го и 2-го изданий Руководства пользователя


Шаг 1

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

Ниже вы увидите список из 20 слов. Внимательно прочтите эти слова и попробуйте запомнить как можно больше. Постарайтесь держать слова “в голове” , не записывайте. У вас около минуты. Когда прочитаете все слова, прокручивайте дальше, до слова СТОП. Потом читайте шаг 2.

Шаг 2

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

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

7 элементов — и это называется законом Миллера.

Закон Миллера · Магическое число

В 1956 году когнитивный психолог Джордж А. Миллер с факультета психологии Принстонского университета написал в журнал Psychological Review статью. Статья называлась “Магическое число семь, плюс-минус два: об ограничениях нашей способности обработки информации”. Позднее статья Миллера стала одной из самых цитируемых работ в области психологии. Ключевая идея теории Миллера в том, что среднестатистический человек может удерживать в кратковременной памяти только 7 ± 2 элементов. Вот информация из статьи на википедии:

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

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

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

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

Одна из ключевых концепций закона Миллера — это деление на порции. По сути это означает, что кусочки информации нужно собирать в “гештальты” — информационные порции, которые проще осмыслить. К примеру, слово · с т а к а н · — это одна “порция”, поскольку буквы скомбинированы в некий осмысленный “гештальт”. Если мы переставим буквы местами · к а а н т с ·, то перед нами уже 6 отдельных порций информации. Формирование “порций” — это важнейший элемент организации информации. Это основа нашего UX.

Правило

Элементы информации следует объединять в тематические группы — при этом в каждой группе должно быть не более 9 (а желательно

Чем больше порций информации в вашем интерфейсе, тем сложнее использовать эту информацию при работе с ним. Особенно это проявляется у новичков, потому что у них еще не сформировался “навык” или привычка — что означало бы, что интерфейс записался в долгосрочную память. Закон Миллера постоянно нарушают даже такие гиганты как Facebook, Google и WordPress. И даже не заводите тему автомобильных интерфейсов!

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

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

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

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

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

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

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

Закон Миллера применительно к другим сферам

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

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

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

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

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

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

Практические советы

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

Я Джефф Дэвидсон

Я помогаю компаниям проектировать прибыльные цифровые продукты. По рабочим вопросам пишите jeffdavidsondesign@gmail.com

Если вам понравилась статья и перевод, дайте нам знать — нажмите �� (можно “хлопать” несколько раз!)

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

Мобильное приложение «Заметки о психике» | Mental Notes

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

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

UX vs UI: в чем разница

Ольга Сорока, Янина Ноэль


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

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

В то же самое время оба эти элемента имеют решающее значение для конечного результата и не могут существовать друг без друга. В общих чертах, UX Design или User Experience Design — это аналитическая и техническая область разработки, в то время как UI Design или User Interface Design — то, что мы иногда ошибочно называем графическим дизайном. Хотя, на самом деле, все гораздо сложнее.

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

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

UX делает интерфейс полезным

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

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

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

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

UX дизайн – 25 бесплатных инструментов в помощь веб дизайнеру

Любой дизайн, не важно, насколько он хорош, будет абсолютно бесполезным, если это не UX дизайн. Есть сотни тысяч ресурсов, которые создают умопомрачительный дизайн интерфейсов и графический дизайн и пользуются услугами лучших профессионалов с нереальным талантом, но не могут занять достойного места в сети. А все, потому что взаимодействие между сайтом и пользователями растет экспоненциально, это значит, что чтоб найти отзыв у пользователя, веб-дизайнерам необходимо заботиться о пользовательском опыте (UX – User Experience – «опыт взаимодействия»). Именно на этом этапе на помощь придут UX дизайн инструменты – отличные онлайн сервисы, которые дают подсказки касательно проектирования пользовательских интерфейсов дизайнерам. Именно о них мы поговорим более детально в этой статье.

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

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

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

Инструмент для проектирования интерфейсов Moqups

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

Wireframe

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

Pencil

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

Balsamiq

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

PowerMockup

Вы мастер PowerPoint? Тогда вам понравится этот инструмент, так как он превратит программу PowerPoint в мощный UX дизайн инструмент для создания макетов. Это означает, что вам вообще не придется изучать новое программное обеспечение. PowerMockup позволяет людям без специальных технических навыков участвовать в процессе проектирования и разработки, что, безусловно, является одним из его основных преимуществ.

Mockplus

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

UXPin

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

Solidify

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

Gliffy

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

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

Инструменты для A/B тестирования

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

Desinion

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

Visual Website Optimizer

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

Optimizely


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

Инструменты для юзабилити тестирования

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

Loop11

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

Crazy Egg

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

Usability Tools

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

Appsee

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

Attensee

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

UserVoice

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

MouseStats

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

UX дизайн инструменты для создания прототипов и совместного проектирования

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

FileSquare

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

Notism

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

Red Pen

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

Memosort

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

Trello

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

Invision

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

Подводим итоги

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

UX, UI, IA, IxD: определения четырех сложных терминов цифрового дизайна

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

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

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

UX дизайн (дизайн опыта пользователя)

UX, UI, IA, IxD: определения четырех сложных терминов цифрового дизайна

Дизайн пользовательского опыта (UXD, XD или UED) — это процесс повышения удовлетворенности пользователей через улучшение доступности, удобства и удовольствия при взаимодействии пользователей с продуктом.

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

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


Коммуникация — это один из самых важных навыков дизайнеров UX. Также им необходимо проводить исследования, конкурентный анализ на начальной стадии, а потом проверку удобства использования и A/B тестирование после запуска проекта.

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

Результаты: прототипы, раскадровки, макеты, карта сайта и письменные спецификации.

Необходимые инструменты: Axure, Mockplus, Sketch, UXPin и так далее…

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

UX, UI, IA, IxD: определения четырех сложных терминов цифрового дизайна

Автор самой идеи и основатель «Adaptive Path», консультационной компании в сфере опыта пользователя, Джесс Гарретт, определяет UI-дизайн как сферу, которая связана с выбором интерфейсных элементов, — к примеру, таблицы цветовых кодов, текста, кнопок и текстовых полей — которые подходят для выполнения задач пользователей, а также с расположением данных элементов так, чтобы продукт был простым и понятным в использовании.

Главная цель — сделать взаимодействие пользователя максимально простым и эффективным.

Интерфейсные элементы включают следующее (правда этим не ограничиваются):

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

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

● Контейнеры: аккордеон.
● Необходимые инструменты: Sketch, Illustrator, Photoshop, Fireworks и InVision.

IA (информационная архитектура)

UX, UI, IA, IxD: определения четырех сложных терминов цифрового дизайна

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

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

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

Профессиональные требования к современному специалисту по информационной архитектуре:

● Опыт в документировании комплексных цифровых объектов (сайты, мобильные приложения, системные службы и программы).
● Подробная документация, способность найти различные несоответствия, «кряки» в комплексной документации веб-сайта.
● Владение Omnigraffle, Keynote, Axure, а также Visio и любыми иными программами, которые непосредственно связаны с IA.
● Анализ доступной информации, а также ресурсов для выбора наиболее оптимального подхода к IA.
● Уверенные навыки коммуникации (устной и письменной) и способность результативно сотрудничать с клиентами и организациями.
● Способность к анализу, креативность, трудолюбие, любопытство и заинтересованность в идеях и людях.
● Надежность, инициативность, мотивированность.

IxD (проектирование взаимодействия)

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

Дизайнеры IxD отвечают за различные движущиеся элементы, а также взаимодействие на веб-сайтах/в приложениях. В случае если вы увидели крутую анимацию в приложении или на сайте и подумали: «Вау! Как же классно!», — знайте, что это сделали моушен-дизайнеры.

Описание работы IxD-дизайнера в компании Google:

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

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

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

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

UI vs. UX: в чем различие?

Какова разница между UI (user interface, пользовательский интерфейс) и UX (user eXperience, пользовательский опыт)?

Если бы у нас было 30 секунд на объяснение, мы бы дали такое блиц-описание.

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

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

Плохой UX: «Я ненавижу всех! Включая тебя!». Великолепный UX: «Люблю жизнь! И тебя! И щеночков!».

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

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

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

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

Затем в 1981 году группа специалистов в области вычислительной техники компании Xerox PARC разработала и запустила Xerox Star — персональный компьютер с самым первым графическим пользовательским интерфейсом (Graphical User Interface, GUI). Он использовал окна, иконки, раскрывающееся меню, радиокнопки (Radio Buttons) и чекбоксы (Checkboxes, флажки для выбора функций). Пользователи теперь могли открывать, перемещать и удалять файлы:

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

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

Команда компании Apple Computer продолжила свое развитие и расширение именно на базе идеи GUI. И в 1984 году они выпустили Macintosh, ставший первым коммерчески успешным десктопным компьютером. Он имел интерфейс с несколькими окнами и мышку, работавшую по принципу «наведи и кликни» (point-and-click).

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


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

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

Что такое пользовательский опыт?

Термин «пользовательский опыт» был придуман ученым-когнитивистом Доном Норманом (Don Norman) в начале 1990-х, когда он был вице-президентом группы разработки новейших технологий в компании Apple.

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

Объясняя происхождение термина, Норман писал:

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

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

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

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

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

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

  1. Процесс, через который они проходят, когда ищут продукт вашей компании.
  2. Последовательность действий, выполняемых ими при взаимодействии с интерфейсом.
  3. Мысли и чувства, возникающие у них при выполнении своей задачи.
  4. Впечатления, получаемые ими от взаимодействия в целом.

UX должен быть: полезным (useful), удобным (usable), востребованным (desirable), имеющим ценность (valuable), находимым (findable), доступным (accessible), вызывающим доверие (credible)

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

Какова разница между UI и UX?

Дон Норман и Якоб Нильсен (Jakob Nielsen) кратко и понятно резюмировали разницу между двумя понятиями:

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

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

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

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

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

Мнения

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

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

Кен Нортон (Ken Norton), один из партнеров в Google Ventures, бывший руководитель отдела по разработке новой продукции в Google:

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

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

Энди Бадд (Andy Budd), соучредитель компании Clearleft и основатель UX Лондон:

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

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

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

Джейсон Мисут (Jason Mesut) отлично описал разницу между UX и UI (а также и частичное совпадение их смыслов) в его «дважды бриллиантовой» модели (Double Diamond Model). Согласно этой модели, разработчик UX имеет глубокие познания в стратегии, практике исследований, информационной архитектуре и дизайне взаимодействия (Interaction Design).

UI-дизайнер (или, как теперь его принято называть в Кремниевой долине, дизайнер цифровых продуктов) также имеет навыки в области дизайна взаимодействия. Однако фокус его работы тяготеет больше к таким областям, как информационный дизайн (Information Design), «движущийся дизайн» (Motion Design) и брендинг.

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

3. Нет никакой разницы между UX- и UI-дизайном, потому это два несопоставимых понятия.

Крейг Моррисон (Craig Morrison), руководитель отдела по разработке продукции компании RecordSetter и основатель Usability Hour:

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

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

Нет никакой разницы.


Красную краску дает соединение различных химических веществ…

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

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

Какова разница между MacBook и формой клавиш?

Какова разница между чаем и видом материала, из которого сделан чайный пакетик?

Какова разница между автомобилем и цветом, в который он окрашен?

Если провести сравнение с вкусным тортом (а почему бы и нет?), UI будет глазурью, коржами, вкусом, способом подачи и оформления. UX же будет первопричиной того, почему мы вообще решили сделать торт и почему люди предпочтут его, скажем, гамбургерам».

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

Патрик Ниман (Patrick Neeman), начальник отдела дизайна продуктов компании Apptio, основатель Usability Counts:

«Дизайн пользовательского опыта охватывает весь опыт пользователя, даже вне экрана его компьютера. Дизайн пользовательского интерфейса, как правило, связан с визуальным и информационным дизайном, то есть с тем, что происходит на экране. Современное определение UX восходит к тому, что дала Nielsen Norman Group: UX — это любая точка контакта пользователя или клиента с системой, как в цифровом ее виде, так и в других проявлениях».

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

Скотт Дженсон (Scott Jenson), руководитель отдела стратегического развития продуктов в Google:

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

UX фокусируется на пользователе и его пути «через продукт».

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

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

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

Клейтон Янь (Clayton Yan), UX-дизайнер компании UserTesting:

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

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

Сколько спален вам нужно, 2 или 3? Будет ли каждая из этих спален иметь собственную ванную комнату? Будет ли гостиная располагаться сразу у входа? Будет ли дом одноэтажным или сделать два этажа?

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

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

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

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

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

А каково ваше мнение?

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

А что думаете вы? Какова разница между UI и UX? Могут ли они использоваться взаимозаменяемо или означают разные вещи?

Что такое UX/UI дизайн, или как сделать посетителю сайта приятно

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

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

Термин UX впервые появился в 1993 году в компании Apple. Аббревиатура означает User eXperience, или “пользовательский опыт”. То есть UX-дизайн — это работа, направленная на эффективное взаимодействие пользователя с интерфейсом сайта, мобильного приложения или любой компьютерной программы. Проще говоря, UX-дизайн нужен, чтобы пользователю было удобно и приятно. Ведь если это не так, человек вряд ли будет залезать в дебри структуры ресурса — просто покинет его и уйдет. А вы потеряете прибыль и лиды.

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

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

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

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

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

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

Человек, который все это делает. А именно:

  • прорабатывает цели и задачи клиента и определяет, как их можно достичь (например, привлечь трафик, увеличить продажи, количество клиентов). Внимание заказчику! Чтобы исполнитель лучше понял, что вам нужно, составьте ТЗ для веб-дизайнера. Расскажите, для чего создается сайт, какие продукты вы собираетесь реализовывать, на какую целевую аудиторию рассчитываете. В ответ хороший дизайнер также пришлет вам ТЗ, где распишет свое видение будущего сайта: общую структуру, детальную проработку каждой страницы, дизайн сайта, место для рекламных баннеров и виджетов обратной связи, интерактивные элементы — кнопки корзины, иконки, и их расположение и многое другое;
  • подбирает подходящие UX-инструменты, которые помогут в создании дизайна. Обычно это специальные сервисы и программы, заточенные конкретно под каждый элемент дизайна. Например, Perfect Icons – инструмент для создания иконок соцсетей, который можно применить и в обычной, и в мобильной версии. Или Flat UI Color Picker – инструмент для создания цветовых нюансов будущего сайта. Заказчику не обязательно вникать в эти инструменты, главное — получившийся результат;
  • разрабатывает UX-дизайн прототипа (эскиза, наброска) сайта, опираясь на собственные знания и опыт, пожелания заказчика и возможности инструментов. Лучше составить несколько вариантов и потом сравнить их;
  • далее дизайнер проектирует взаимодействие и тестирует продукт на соответствие тому самому “пользовательскому опыту”- продумывает, как посетитель будет пользоваться сайтом. Для этого составляются несколько вариантов каркасов сайта, карт маршрутов пользователей, проверяется и сравнивается несколько вариантов и выбирается лучший. Также на помощь приходят специальные инструменты: например, UX Checklist. Это реальный чек-лист на соответствие каждого параметра принципам UX-дизайна. Если программа показывает, что сайт оставляет желать лучшего — значит, придется подождать еще немного. Хороший веб-дизайнер не успокоится, пока не доведет дело до конца;
  • согласует получившийся результат с заказчиком, при необходимости вносит правки и выслушивает пожелания. На этом этапе вы вспомните про ТЗ и возблагодарите Бога, что составили его. Дело в том, что получившийся результат и ваши пожелания могут существенно отличаться. Без обид, но вы — не специалист в сфере дизайна. Успешный бизнесмен — да, талантливый менеджер — да, но не дизайнер. Поэтому то, что вы придумали и представляли себе долгими вечерами, специалист может забраковать. Не обижайтесь: это значит, что придуманные вами идеи не помогут развитию вашего бизнеса, а может быть, и оттолкнут посетителей. Придется довериться дизайнеру: он лучше знает, как привлечь трафик и сделать сайт продающим.


Еще лучше, когда дизайнер работает в связке с другими специалистами: программистами, вебмастерами, маркетологами, рекламщиками (например, в студии веб-дизайна). Они делят ответственность пополам и принимают оптимальное решение в процессе мозгового штурма.

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

Если UХ-дизайн — это скелет будущего сайта, то UI-дизайн — его детальная проработка и визуальное воплощение. Грубо говоря, первое понятие можно сравнить с планировкой дома, второе — с покупкой мебели и деталей интерьера. UI-дизайн (User Interface) переводится как “пользовательский интерфейс”. Это комплекс графических решений, которые определяют, удобно пользователям будет находиться на сайте или не очень.

Рассмотрим основные правила UI-дизайна:

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

Что делает UI-дизайнер?

Часто UX- и UI-дизайнер — это один и тот же человек. Универсальный специалист обычно умеет создавать прототипы сайта и прорабатывать его детальное наполнение:

  • разрабатывает дизайн и элементы управления каждой страницы. Дизайнер продумывает даже такие на первый взгляд мелочи, как расположение личного кабинета — слева или справа на верху страницы, цвет кнопки призыва к действию и количество слов, написанных на ней, количество шагов, который должен сделать пользователь, чтобы сделать заказ в интернет-магазине или зарегистрироваться;
  • подбирает подходящие UX-инструменты и программы. В основном это графические редакторы: Photoshop, Illustrator, Sketch, Adobe XD, Figma и другие;
  • следит за тем, чтобы каждая страница и каждый элемент органично смотрелись и вызывали положительные эмоции на всех носителях: стационарном компьютере, планшете или ноутбуке, смартфоне. То есть иметь адаптивную верстку;
  • учитывает основные тренды веб-дизайна: наличие свободного пространства, смелые сочетания шрифтов, четкие крупные шрифты, минимализм и лаконичность. Польза — это здорово, но красоту и приятный взгляду интерфейс тоже никто не отменял. Впрочем, почти всегда UX-дизайн и современные решения идут рука об руку;
  • так же согласовывает проект с заказчиком, при необходимости вносит правки, тестирует и принимает окончательное решение.

Что еще должен уметь дизайнер?

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

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

  1. Различать специализацию. Веб-дизайнер — понятие широкое. Среди них и визуальные дизайнеры, и графические дизайнеры и, конечно, UX (дизайнеры пользовательского опыта) и UI (дизайнеры интерфейса). Если специалист говорит, что он мегапрофи в любой области — проверьте его слова. Как правило, если человек действительно профи, он сам понимает, какое направление ему ближе, и начинает совершенствоваться именно в этой сфере.
  2. Постоянно развиваться. Тренды дизайна меняются каждый год, чтобы не отставать от модных тенденций, нужно постоянно адаптироваться к изменениям. Для этого дизайнер просто обязан изучать тематические статьи, читать книги, мониторить новости. В то же время слепое поклонение трендам — тоже не есть хорошо. Важно найти баланс между пользой для пользователя и погоней за модой.
  3. Иметь чувство прекрасного. Проверить это можно одним способом — попросить дизайнера показать свое портфолио, лучшие работы. Если ваши вкусы различаются — лучше найдите другого специалиста. Иначе готовьтесь к бесконечным баталиям и непредсказуемому результату.

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

Руководство по разработке и использованию элементов управления выбором

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

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

Одиночный выбор

Сегментированный элемент управления

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

Иконки и короткие слова vs Денежные единицы. Иконки от Meg

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

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

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

Радиокнопки (Radio Buttons)

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

Android и веб vs iOS vs альтернативный паттерн

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

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

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

Множественный выбор

Choice Chips

Фишки выбора (Choice chips) следует использовать для выбора нескольких вариантов из примерно 3–6. Их лучше всего использовать для одного-двух коротких слов или цифр. Их дизайн аналогичен маленькой кнопке с изменением цвета фона для «вкл» и «выкл», и имеет, как правило, минимальную высоту цели нажатия.

Хотя Material Design рекомендует установить галочку перед несколькими вариантами выбора, я решила не включать его, потому что наиболее знакомые chips – это адреса электронной почты, и они не используют галочку. Это также экономит горизонтальное пространствo.

Короткие варианты vs Длинные варианты vs Перенос слов

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

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

Галочки

Галочки (Checkmarks) в списке элементов должны использоваться для множественного выбора из более чем 6 вариантов и / или при неограниченном вертикальном пространстве. Они обозначены квадратным контуром в начале элемента списка, который заполняется галочкой при выборе.

Галочка в элементе списка


Плюсы и минусы. У них те же преимущества и проблемы, что и у радиокнопки.

Теперь все вместе!

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

Сегментированный элемент управления и Choice Chips

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

Сходство vs Отличие

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

Отличие от кнопки vs Сходство с кнопкой

Радиокнопки и галочки

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

Android & Web vs iOS vs альтернативный паттерн

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

Изображения в конце vs изображения вначале

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

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

Я забыла какие-то элементы управления? Пожалуйста, пишите в комментариях!

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Николай Геллар

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

UX-дизайн: 10 законов

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

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

UX-дизайн: Закон Фиттса

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

Закон Хика

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

Закон Якоба

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

Закон прегнантности

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

UX-дизайн: Закон близости

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

Закон Миллера

В среднем, человек может удержать в памяти 7 ± 2 элемента в своей рабочей памяти. В 1956 году Джордж Миллер утверждал, что диапазон непосредственной памяти и абсолютного суждения был ограничен примерно 7 частями информации. Основной единицей информации является бит, объем данных, необходимый для выбора между двумя одинаково вероятными альтернативами. То есть, 4 бита информации — это решение между 16 парными альтернативами (4 последовательных двоичных решения). Точка, в которой путаница вызывает неправильное суждение, — это пропускная способность канала.

Закон Паркинсона

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

Эффект серийного расположения

Пользователи лучше всего запоминают первые и последний объекты в серии. Манипуляции с серийным размещением для создания лучшего пользовательского опыта используется во многих популярных дизайнах успешных компаний вроде Apple, Electronic Arts и Nike.

UX-дизайн: Закон Теслера

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

UX-дизайн: Эффект Фон Ресторфф

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

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