Интерактивный прототип мобильного менеджера задач Yodel, разработанного Лайв Тайпинг

Для более наглядной демонстрации работы приложения инвесторам и потенциальным пользователям можно заняться разработкой интерактивного прототипа. Хотя стоит отметить, что это не обязательный этап, так как мокап+user flow diagram вполне себе является прототипом, описывающим будущий продукт с точки зрения UX. Однако интерактивный прототип даст более полное представление и о возможностях приложения, и об объеме работ по их реализации.

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

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

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

Утверждение результата

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

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

Вывод

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

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

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

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

10 правил проектирования интерфейсов, которые нельзя нарушать

Лучшие практики UI-дизайна.

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

Этот список был взят из статьи Norman Neilsen «10 эвристик для проектирования интерфейса».

1. Видимость состояния системы

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

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

2. Соответствие между системой и реальным миром

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

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

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

3. Последовательность и стандарты

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

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

4. Контроль и свобода пользователей

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

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

5. Предотвращение ошибок

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

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

6. Пользователи должны узнавать, а не вспоминать

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

Одна из целей UI дизайнера – снизить когнитивную нагрузку на пользователей. Психическая память – это огромный ограниченный ресурс. Память работает двумя способами: узнавание и воспоминание. Узнавание – это то, что вам сразу знакомо. Как лицо человека. Вы смотрите на лицо друга и сразу понимаете, что видели его раньше. Механизм воспоминания работает иначе. Это то, что вам нужно извлечь из памяти, например, имя человека. Воспоминание обычно требует больше времени и усилий, потому что разуму нужно обрабатывать больше информации, чтобы расшифровать то, на что он смотрит. С другой стороны, узнавание происходит мгновенно. Мы хотим больше узнаваемости в интерфейсе и меньше воспоминания. Хороший пример этого принципа – использование для функций универсально узнаваемых кнопок и иконок, например, дом для «ДОМОЙ» или карандаша для «РЕДАКТИРОВАТЬ». А если вам нужно спроектировать для интерфейса новые иконки, которые большинство людей никогда раньше не видели, используйте текстовый дескриптор, чтобы объяснить их и уменьшить когнитивную нагрузку.

7. Гибкость и эффективность использования

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

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

8. Минималистский дизайн и эстетика

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

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

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

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

Ошибки будут. Это неизбежно. Обязанность UI дизайнера, определить, что произойдет после того, как пользователь обнаружит ошибку. Таким образом, мы можем помочь пользователям, проектируя понятные страницы ошибок и предупреждения, предоставляющие варианты решения проблемы. Например, давайте рассмотрим широко распространенную страницу 404. Мы, как дизайнеры, знаем, что означает страница с ошибкой 404, но обычно пользователи этого не знают. Чтобы помочь им, мы должны перевести код 404 на простой язык, добавив текст, поясняющий, что только что произошло. Например: «Извините, но мы не смогли найти страницу, которую вы искали. Вот несколько страниц с похожим контентом…».

10. Справка и документация

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

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

Перевод статьи uxdesign.cc

Этапов разработки интерфейса. Как Flyphant организует процесс… | от Flyphant | Muzli

Как Flyphant организует процесс разработки интерфейса для нового проекта или его обновления.

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

Слово «интерфейс» означает любую информацию на экране или интерактивный интерфейс. Это:

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

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

Полный цикл разработки интерфейса включает следующие этапы:

1. Исследования
2. Сценарий использования
3. Структура интерфейса
4. Прототипирование интерфейса
5. Определение стилистики
6. Концепция дизайна
7. Проектирование всех экранов
8. . разработки, определение стилистики начинается после вариантов использования.

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

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

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

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

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

   1. Перейти на сайт
   2. Войти
   3. Перейти в профиль
   4. Кликнуть на аватар
   5. Выбрать файл
   6. Подтвердить или изменить обрезку изображения
   7. Из проекта flyen.com

   0 /projects/datsun/

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

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

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

   Из проекта flyphant.com/ru/projects/datsun/

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

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

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

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

   Из проекта flyphant.com/ru/projects/wbp/

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

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

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

   Один из этих наборов ляжет в основу концепт-дизайна.

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

   Из проекта flyphant.com/ru/projects/wbp/

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

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

   Из проекта flyphant.com/ru/projects/wbp/

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

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

   Этот этап часто начинается с разработки концепции и продолжается на протяжении всего этапа проектирования всех экранов.

   Из проекта flyphant.com/ru/projects/wbp/

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

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

   Зачем нужно анимировать интерфейс, как это нужно и не нужно делать.

   medium.com

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

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

   Это могут быть следующие материалы:

   • спрайты,
   • шрифт со всеми иконками,
   • UI Kit с повторяющимися элементами интерфейса и их состояниями.

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

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

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

   Я Саша Тихонов, соучредитель и арт-директор Flyphant.

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

   flyphant.com · твиттер · фейсбук · инстаграм

   Обзор разработки пользовательского интерфейса — приложения Win32

   Редактировать

   Твиттер

   LinkedIn

   Фейсбук

   Электронное письмо

   • Статья
   • 17.01.2020
   • 2 минуты на чтение

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

   Пользовательский интерфейс приложения и пользовательский интерфейс

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

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

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

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

   Разработка пользовательского интерфейса

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

   Ниже описаны типичные этапы процесса разработки пользовательского интерфейса:

   Проектирование

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