SixWeeksApp: этап 1, день 1 — прототипирование пользовательского интерфейса

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

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

У нас нет времени делать детальную красивую схему информационной архитектуры, поэтому я опишу словами, как я вижу её на данный момент:

Начинается всё с главного экрана, на котором есть четыре таба (страны, карты, вишлист и статистика), кнопка “добавить” и боковое меню.

Кнопка “добавить” запускает user flow, который предоставляет доступ к основной функции приложения — построение карты посещенных стран и публикация в соцсетях. Табы предоставляют быстрый доступ к важной для пользователя информации, а в боковом меню скрыты все остальные функции.

Эх, всё равно непонятно. Придется-таки нарисовать схему.

(прошло полчаса)

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

Так что работа была проведена не зря. Ниже я покажу результат сегодняшней сессии в приложении Adobe Experience Design CC, которое является частью Creative Cloud и самым новым средством создания прототипов, в том числе и интерактивных. Но об этом позже.

Прототипирование: первый подход
Прототипирование: первый подход

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

Есть также несколько вопросов к вам:

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

And one more thing…

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

#SixWeeksApp

3 thoughts on “SixWeeksApp: этап 1, день 1 — прототипирование пользовательского интерфейса”

  1. Дима, читай Material Design Guidelines (https://www.google.com/design/spec/material-design/introduction.html) и iOS Human Interface Guidelines (https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html?utm_source=twitterfeed&utm_medium=twitter) и не изобретай велосипед.

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

    1. Да я и не собирался велосипед изобретать. Но мне чистый материал дизайн не нравится тем, что там всё очень разрежено. Экран ФуллХД, а влезает 4 строчки текста. Floating Button ваще бесит неимоверно. Лучше бы они от неё избавились, а не от drawer.

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

      1. Норм. Less is more. FAB — отличный компонент, особенно когда он превращается в таб при нажатии.

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

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