Макетная актуальность

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

У нас в команде есть 5 источников таких знаний:

  • требования в Jira,
  • макеты в Zeplin,
  • статическая вёрстка,
  • cтейджинг,
  • голова дизайнера.

Итак, разложим каждый по характеристикам: лёгкость поиска, читаемость, близость к правде, видимость деталей.

Требования в Jira

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

Макеты в Zeplin

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

Статическая вёрстка

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

Стейджинг

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

Голова дизайнера

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

Вывод

Требования Макеты Вёрстка Стейджинг Голова
Лёгкость поиска + + +
Читаемость + +
Правдивость +/− + + + +/−
Видимость деталей +
Итого −3 4 3 0 −3

Вот и решайте теперь, стоит держать макеты актуальными или нет.


Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Лист действий

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

iOS

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

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

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

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

Android

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

Нажатие на холст и свайп вниз закрывает лист действия.


Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

11 октября   ios vs android

Глубинное интервью

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

Закрытые вопросы

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

Преимущества:

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

Недостатки:

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

Открытые вопросы

Эти обычно начинаются со слов: «почему, зачем, как, опишите, расскажите, что вы думаете и прочее».

Преимущества:

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

Недостатки:

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

Грязный приём, как превратить закрытый вопрос в открытый. Закрытый вопрос + «Расскажите...» = Открытый вопрос.

Техника «Пять почему»

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

Часто повтор одного и того же вопроса вызывает дискомфорт. Как сгладить его:

  1. Переформулировать, например «Что является причиной?» или «Из-за чего ... происходит?» или «А чего так?».
  2. Сказать, что будете спрашивать «Почему?», потому что хотите докопаться до первопричины.

Техника «Что? Кто? · Где? Когда? · Как? Почему?»

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

  • Что произошло? Что было самое сложное? Что делает человек? Кто ещё вовлечён? Что не устраивает в текущем решении?

Узнать контекст. Где это происходит и когда.

  • Где это происходило? Когда это происходило в последний раз?

Как они это делают. Как решают задачи уже. Почему так.

  • Как именно это произошло? Почему это было сложно? Как вы справились? Как часто повторяется? Поменялась ли решение проблемы со временем и почему?

Стадия: подготовка

Подготовка заключается в шести шагах:

  1. Понять цель интервью.
  2. Сделать кабинетное исследование по теме.
  3. Составить план: вопросы, ситуации, особенности.
  4. Сформулировать гипотезы.
  5. Задуматься, что ещё может пригодиться на интервью.
  6. Иметь 3 главных вопроса.

Стадия: интервью

Начало

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

Основная часть

  • Говорите о жизни собеседника, а не о вашей идее.
  • Спрашивайте о конкретных вещах, которые происходили в прошлом, а не о взглядах или мнениях на перспективу.
  • Меньше говорите, больше слушайте.
  • Используйте техники «Пять почему» и «Что? Кто? · Где? Когда? · Как? Почему?», чтобы копать глубже.
  • Проявляйте дружелюбие и интерес. Будьте проще.
  • Разговаривайте на одном языке
  • Сохраняйте нейтральность вопроса. Не высказывайте своё мнение. Не оценивайте.
  • Просите сравнивать.

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

Сложные ситуации: молчаливый респондент

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

Сложные ситуации: неуверенный

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

Сложные ситуации: говорливый

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


Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Панель инструментов

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

iOS

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

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

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

Android

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

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

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

Расширенный FAB шире, и он включает в себя текстовую метку.


Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

5 октября   ios vs android

Панель вкладок

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

iOS

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

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

Используйте панель вкладок строго для навигации. Кнопки панели вкладок не должны использоваться для выполнения действий.

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

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

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

Android

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

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

Вместо этого используйте вкладки.

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

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

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

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

Нажатие в другой раздел всегда приводит к корневой странице раздела, без сохранения контекста.

При прокрутке нижняя панель навигации может появляться или исчезать.

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


Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

28 сентября   ios vs android
Ранее Ctrl + ↓