Connect with us

Дизайн и прототипирование

Руководство по проектированию цифровых продуктов для дизайнеров и их соратников

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

AppTractor

Опубликовано

/

     
     

Александр Волошин на сайте UX CLAN опубликовал большое руководство по дизайну. С его разрешения мы публикуем его на AppTractor.ru. Если вы хотите узнать больше и получить практические навыки по проектированию цифровых продуктов, то можете также пройти его интернет-тренинг DIGITAL PRODUCT DESIGN.

Так же как и многие начинающие дизайнеры, я лихорадочно осваивал только программы и инструменты, и совсем не думал о методологии, из-за чего и испытал на себе все тяготы дизайнерской работы, как на фрилансе, так и в различных дизайн-студиях и айти-компаниях. Однажды я решил разобраться во всем и разработать простой в освоении и гибкий алгоритм, в результате чего и родилось это пособие. В его основе лежат методологии Human Centered Design и Design Thinking, богатый личный опыт работы над проектами разной сложности, а так же понимание специфики работы мозга. Эта статья является копией страницы на моем сайте http://ux-clan.org/weapon/.

Часть первая. Поиск силы

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

Человеческий мозг

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

1

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

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

  • мозг эффективно работает только над одной задачей;
  • головой надо думать; для запоминания есть другие инструменты;
  • рабочая память – это пространство, где мы думаем;
  • когда мозг думает, он тратит энергию. Мозг устает думать через 40 минут, потому что заканчивается энергия;
  • много думать над одной задачей плохо и неэффективно, и если вам нужно что-то придумать, нужно думать мало;
  • мозг в течение рабочего дня думает максимум 2–3 часа;
  • чтобы мозг отдохнул, нужно не думать и не нагружать его вообще ни чем, то есть потупить;
  • отделяем «думать» от «делать», то есть думаем только в момент принятия решения, потом делаем и не думаем в этот момент;
  • любое дело мы дробим на задачи;
  • хорошо составленная задача не заставляет думать, с чего начать и отвечает на вопрос: «Что нужно сделать?»;
  • разложить все по местам и освободить мозг.

Подсознание

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

2

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

Продукт как цель

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

3

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

Часть вторая. Управление силой

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

Дизайн-мышление

Дизайн-мышление – это такая методология решения проблем в условиях неопределенности и работы с нестандартными задачами. Ценность методологии заключается в том, что она заточена на работу с “неявным знанием” потребителя, который не в состоянии осознать и вербализировать свои проблемы и потребности, а также помогает находить инновационные решения. Это тот случай, который описывал Генри Форд в своем знаменитом высказывании: “Если бы я спросил людей, чего они хотят, они бы попросили более быструю лошадь”. Апологетом дизайн-мышления является компания IDEO, которая специализируется на разработке инновационных продуктов для крупных компаний.

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

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

4

Что есть?
Исследуется существующая реальность.

Что если?
Представляется новое будущее, генерируются идеи.

Что цепляет?
Делается определенный выбор из предложенных идей.

Что работает?
Проводится тестирование и вывод продукта на рынок.

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

5

Проходя по этапам мы то расширяем поток информации, используя дивергентное мышление (лат. diverge – расходиться), то фокусируемся на самом важном, используя конвергентное мышление (лат. convergere – сходиться). Дивергентное мышление – это то же самое, что и рассеянное мышление; применяется, когда нужно придумать что-то новое, сгенерировать идеи. Конвергентное мышление – это сфокусированное мышление; применяется когда нужно сосредоточиться на какой-либо информации, проанализировать и изучить её, принять решение. Коротко рассмотрим каждый этап.

Исследования

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

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

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

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

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

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

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

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

Три уровня дизайна

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

6

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

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

Рабочий процесс

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

7

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

Итерации и жизнь продукта

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

8

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

9

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

10

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

Часть третья. Применение силы

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

Дизайн продукта

11

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

В процессе проектирования нужно всегда помнить о трех основных составляющих, которые лежат в основе любого цифрового продукта: бизнес-требования, пользовательские требования и используемые технологии. Именно из этих трех составляющих и получается хороший продукт, то есть UX (англ. User eXperience – пользовательский опыт взаимодействия). Любой правильно настроенный процесс должен помогать дизайнеру постоянно держать в фокусе эти составляющие, иначе есть большой риск заблудиться в информации и пойти не в том направлении. На первом этапе проектирования мы опираемся на эту информацию, поэтому так важно уделить процессу сбора информации особое внимание. Почему это так важно поможет понять такая легенда: однажды Эйнштейна спросили, как бы он потратил час времени, выделенный на решение трудной задачи, и он ответил, что потратил бы 55 минут на определение задачи и её альтернатив, а 5 минут – на её решение.

12

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

  1. Определить конечные цели и потребности бизнеса.
  2. Узнать кто конечный пользователь продукта, определить каковы его цели и потребности, с какими проблемами сталкивается сейчас и как он их решает.
  3. Описать персонаж пользователя на основе полученных данных и держать его перед глазами в течение всей работы над проектом.
  4. Изучить существующие технологии которые используются в данной предметной области.
  5. Изучить уже существующие решения и конкурентов.
  6. Проанализировать полученную информацию и сгенерировать идеи.
  7. Описать требования к будущему продукту.
  8. Описать будущий опыт работы с продуктом с помощью пользовательских сценариев и сторибордов. Нужно охватить все ключевые сценарии, должно быть понятно как работает продукт.
  9. При необходимости, составить диаграммы потоков задач опираясь на ключевые пользовательские сценарии.
  10. Сделать первые концептуальные наброски.
[notice]

Контрольная точка

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

[/notice]

Дизайн взаимодействия

13

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

14

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

  1. Выявить и записать абсолютно все сценарии использования.
  2. Составить информационную структуру продукта (разбивка по экранам/страницам).
  3. Описать функционал и информационное наполнение для каждого экрана/страницы.
  4. Проработать несколько прототипов будущего продукта.
  5. Провести эвристическую оценку интерфейса.
  6. Провести пользовательское тестирование прототипа и внести правки.
  7. Составить карту навигации на основе сценариев и прототипа.
[notice]

Контрольная точка

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

[/notice]

Дизайн графического интерфейса

15

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

16

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

  1. Определить общее настроение, тон визуальной и текстовой коммуникации на основе исследований целевой аудитории.
  2. Проработать несколько вариантов графического оформления для ключевых экранов.
  3. Выбрать один вариант и проработать все экраны.
  4. Проработать эффекты и анимацию.
  5. Подготовить графику для вёрстки и руководство для программистов.
  6. Проверить результаты работы программистов.
[notice]

Контрольная точка

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

[/notice]

Рабочий процесс и документация

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

17

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

18

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

AppTractor
Комментарии Facebook
Продолжить чтение
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Дизайн и прототипирование

Snapchat ждет редизайн

Чтобы справиться с замедлением Эван Шпигель объявил о планах сделать редизайн приложения.

Леонид Боголюбов

Опубликовано

/

Snap Inc. сегодня объявил о результатах работы в третьем квартале 2017 года. Они ниже ожиданий – за три месяца прибавилось 4.5 миллиона пользователей (против ожидаемых 8), а рекламные ставки снизились на 60% по сравнению с прошлым годом. Snap заработал 207.9 миллиона, что заметно меньше прогнозируемых 235.5 миллионов. На Spectacles компания потеряла 40 миллионов долларов.

Чтобы справиться с замедлением Эван Шпигель объявил о планах сделать редизайн приложения. Он наконец признал то, что Snapchat трудно использовать и отметил, что сейчас компания уже работает над значительным упрощением социальной сети:

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

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

 

 

Леонид Боголюбов
Комментарии Facebook
Продолжить чтение

Дизайн и прототипирование

11 оптических иллюзий в визуальном дизайне

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

Анна Гуляева

Опубликовано

/

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

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

1. Иллюзия деления треугольника пополам

Выравнивание треугольника по центру тяжести

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

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

Которая версия математически центрирована?

Существует две теории этой занимательной иллюзии:

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

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

Шучу, эта статья не посвящена геометрии (но формула все равно верна). Центр тяжести может быть расположен на 1/3 расстояния от каждой стороны до противоположной вершины. Этот метод можно применить и к другим формам.

2. Вертикальная горизонтальная иллюзия

Это прямоугольник? Это самолет? Нет… это квадрат?!

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

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

Изображение в этом посте Facebook имеет соотношение сторон 1:1

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

3. Полосы Маха

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

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

4. Иллюзия Геринга

Оно живое!

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

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

5. Сетка Германна

Появляться или не появляться, вот в чем вопрос.

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

На пересечении линий появляются серые точки

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

6. Иллюзия одновременного контраста

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

Текст на разных сторонах имеет одинаковый цвет

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

7. Иллюзия Манкера-Уайта

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

Причина иллюзии Манкера-Уайта… вы догадались, латеральное торможение.

8. Акварельная иллюзия

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

Это визуальное явление, известное как акварельная иллюзия, зависит от сочетания яркости и контрастности контура, которое приводит к эффекту распространения цвета.

Белый цвет внутри кнопки словно приобретает легкий оттенок цвета границы.

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

9. Иллюзия Ястрова

Размер имеет значение?

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

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

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

10. Иллюзия Корнсвита

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

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

Эта иллюзия создает похожий эффект, как и две вышеупомянутые, но кое в чем она отличается:

  • В примере полос Маха эффект возникает в зонах, близких к краю каждого оттенка. Иллюзия Корнсвита влияет на восприятие всей фигуры.
  • В иллюзии Корнсвита светлый край кажется светлее, а темный край – темнее. Это противоположно обычным эффектам контраста.

11. Иллюзия Мюллера-Лайера

Отклонение для оптимального визуального восприятия

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

Без отклонения буква e в LinkedIn и буква z в Amazon кажутся несбалансированными

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

Зачем нам нужно отклоняться от высоты в типографике?

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

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

Другие значимые иллюзии:

Анна Гуляева
Комментарии Facebook
Продолжить чтение

Дизайн и прототипирование

Год работы над дизайном WhatsApp

Несмотря на то, что WhatsApp принадлежит компании Facebook, он работает достаточно обособленно. Дизайнер Чарли Дитс рассказал о подходе WhatsApp к созданию дизайна продукта.

Анна Гуляева

Опубликовано

/

Несмотря на то, что WhatsApp принадлежит компании Facebook, он работает достаточно обособленно. Дизайнер Чарли Дитс рассказал о подходе WhatsApp к созданию дизайна продукта.

Я работаю дизайнером продуктов в Facebook почти четыре года. Я работал во многих командах: Groups, Sharing и Privacy. В прошлом году я получил прекрасную возможность начать работать над WhatsApp. Я знал, что создание дизайна WhatsApp будет немного отличаться от создания дизайна для Facebook. Но эта работа научила меня большему, чем я ожидал – я начала подходить к проблемам с разных сторон.

Я много узнал за последний год и хочу поделиться своими наблюдениями за дизайном Facebook и WhatsApp.

Сильные принципы

Продукт WhatsApp создается на основе специфических принципов. Они лежат в основе процесса принятия решений. Вот несколько примеров таких ценностей:

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

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

Если я рассказываю это дизайнерам из Facebook, они бурно реагируют. Они говорят что-то вроде: “Меня бы это злило!”, “Кто принимает решения о развитии продукта?”, “Не кажется ли, что у тебя нет контроля?”, “Можешь ли ты предлагать новые идеи?”

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

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

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

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

Вовлечение через пользу против пользы через вовлечение

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

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

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

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

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

Инструменты и дизайнерские навыки

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

Для прототипирования я часто использую Origami, но в работе в Facebook мне помогали инструменты, которые не так подходят к моей текущей работе, так как у WhatsApp нет формализованного набора элементов интерфейса, и в нем не используется API Facebook Graph.

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

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

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

Уникальные проблемы

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

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

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

Медленно и обдуманно

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

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

Ценность Facebook – “Двигаться быстро”. Создание проекта в Facebook может быть очень быстрым, но процесс его развертывания может занять время. Если бы у WhatsApp был похожий девиз, он звучал бы как “Двигаться медленно и обдуманно”. Мы тратим больше времени на стадии дизайна, потому что мы не поддерживаем внесение изменений на фазе разработки. Когда мы передаем дизайн инженерам, мы пытаемся отдать им как можно больше конечных спецификаций и прототипов. Поэтому стадия разработки проходит спокойно, что нравится инженерам. Потенциальный минус такого подхода – разработчики могут чувствовать себя менее вовлеченными в процесс создания продукта и более изолированными от принятия решений.

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

Итог

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

Анна Гуляева
Комментарии Facebook
Продолжить чтение




Календарь

ноябрь

24ноя - 26Весь деньWhat the hack?!

25нояВесь деньSmart Taler 2017

25нояВесь деньLadies Code: время технологий

30нояВесь деньSmart Cars & Roads 2017

декабрь

5дек18:30- 22:00Яндекс изнутри: глазами iOS-разработчика

8дек - 9Весь деньКубок СTF России

9дек - 10Весь деньGames Gathering 2017

9декВесь деньЛекционный день по игровой индустрии

Наша рассылка

Каждому подписавшемуся - "1 час на UI аудит": бесплатный ускоренный курс для разработчиков веб и мобильных приложений!

Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Наш Facebook

Популярное

X

Спасибо!

Теперь редакторы в курсе.