Connect with us

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

Проектирование и дизайн приложений: детали и хитрости

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

Джаред Барол

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

/

     
     

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

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

Для создания навигационной схемы необходимы:

  1. Портрет пользователя;
  2. Задачи пользователя;
  3. Контекст использования;
  4. Сценарий использования;

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

В качестве… (описание представителя ЦА, его роль в приложении), он получает..(действия в приложении) для… (цели его действий в приложении).

Для создания навигационной карты все эти сценарии нужно упростить и представить в виде последовательных действии:

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

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

  1. Обязан быть
  2. Должен быть
  3. Может быть
  4. Мог бы быть

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

Главная: Политика, Экономика, Общество, Культура, Меню, Поиск, Обновить, Избранное, Настройки, Обсудить.

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

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

eyeappmap

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

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

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

Пару слов о дизайне

Дизайн всегда был и остается дискуссионной темой прежде всего благодаря неоднозначным показателям подсчета его эффективности. И хоть в России более 78% мобильной аудитории обращают внимание на цвета в повседневной жизни, яркость и красочность в мобильном приложении важны всего для 6% аудитории. По мнению компании Apple, идеальный дизайн мобильного приложения строится на трех китах:

  1. Контент. Интерфейс призван помогать пользователям, направлять их, а не отвлекать.
  2. Четкость. Легкий для восприятия текст, простые иконки, функциональный дизайн.
  3. Глубина. Визуальное разделение информации.

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

Нужно помнить:

  1. Пользователю не нужно показывать, куда идти. Вместо этого, лучше всего четко давать понять, где он сейчас находится. Поэтому, лучше всего выносить наверх самые приоритетные разделы приложения.
  2. Повышайте детализацию с переходом на новый уровень иерархии. Но не переусердствуйте с уровнями. Слишком много переходов отпугнут пользователя. Поэтому, лучше разрабатывать навигационную карты с нижних уровней.
  3. Информация, предоставляемая на экране – это еще не весь функционал. Информацию одного уровня можно представлять на параллельных экранах, доступ к которым осуществляется простым скролом. Так же, нужно использовать меню приложения, доступное либо по тому же скролу, либо при нажатии функциональных клавиш на устройстве.
  4. Внимательно читайте гайдлайны сторов. В них содержится полезная информация о тонкостях построения дизайна приложения.
Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
1 Comment

1 Comment

  1. Zholdasbek

    26.01.2015 at 05:37

    Классная статья. Есть ли англоязычные ресурсы по этому вопросу? Например, как создавать навигационные карты. Хотел создать запрос в гугле, но на запрос: mobile app design navigation cards ничего релевантного не находится.

You must be logged in to post a comment Login

Leave a Reply

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

Hyperion

Hyperion – встраиваемый в iOS-приложения плагин, помогающий контролировать верстку.

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

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

/

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

  

 

 

Комментарии
Продолжить чтение

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

Flawless

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

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

/

Flawless – система для сравнения макета и получившегося iOS-приложения.

Фактически это плагин для эмулятора iOS, в котором запускается ваше приложение. Он берет внешний sketch, jpeg, png, tiff или gif и накладывает его (прозрачно поверх или разделяя экран) на реальное приложение.

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

Комментарии
Продолжить чтение

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

Google исправил бургер и пиво в Android 8.1

В Android 8.1 действительно станет с едой получше – теперь эмодзи бургера в нем соответствует всем канонам.

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

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

/

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

В Android 8.1 с едой действительно станет получше – теперь эмодзи бургера в нем соответствует всем канонам:

Заодно поправят и пиво – раньше оно выглядело как минимум странно:

Теперь заживем!

Emoji: больше, чем смайлики

Комментарии
Продолжить чтение

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

Как потерять доверие пользователей к продукту и чем это чревато?

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

AppTractor

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

/

Автор:

Изображение с сайта Kayako.com

Когда я была маленькая, родители сдавали меня на лето на дачу к бабушке. Дама она была очень строгая и не разрешала мне включать телевизор, потому, что не доверяла ему (или мне :)) Аргумент был простой – «у телевизора даже экран бьет током, возьмешься за вилку – тебя убьет!». Ну как тут поспоришь?

Доверие – либо полное, либо его нет. Ощущением доверия измеряется человеческое счастье. Громко звучит? Тем не менее, так и есть. Человек не может чувствовать себя счастливым, если тревожится, что дверь могла не закрыться, утюг не выключился, будильник не прозвенит, календарь не сообщит о мероприятии, изменения не сохранятся и др.

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

Кривизна, кустарщина

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

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

Страница статистики сервиса товарных рекомендаций Retail Rocket

– Оля, ты – дизайнер, ты это видишь, а нормальным людям на такое плевать!

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

God is in the detail, – народная мудрость

Непонятный нейминг

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

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

Фрагмент настроек сервиса колл-трекинга CallbackHunter

Например, подсказка у первого пункта Mouse motion speed гласит Average mouse motion speed analysis. Почему оно равно 9.8, осталось для меня тайной, в чем это 9.8 измеряется – тоже. Если вы понимаете что это все значит – напишите в комментариях, пожалуйста.

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

Сообщения об ошибках

Хотела тут недавно купить биткоины через приложение Coinbase. Вместо того, чтобы провести транзакцию оно сообщило мне «It looks like an unknown error occurred while processing the buy…». Гайз, если вы сами не знаете, что за ошибка у вас произошла – как мне вам доверять свои деньги и криптовалютный кошелек? В поддержку они мне, кстати, тоже не ответили :(

Сообщение об ошибке в мобильном клиенте криптовалютной биржи Coinbase

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

Попап ошибки в системе аренды недвижимости RentLinx

Отображение состояний

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

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

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

Интерфейс PlayStation. Иконки с обозначениями кнопок в самом низу экрана.

Экран «Спасибо за заказ» в приложении доставки еды Just Eat

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

Интерфейс PlayStation. Иконки с обозначениями кнопок в самом низу экрана.

Статусы заказа и интерактивная карта сервиса доставки Glovo

Защита от дурака

Часто слышу от программистов «А зачем пользователь туда полез? Сам виноват». А вот и не так! Если продукт разрешил пользователю «туда полезть» и накосячить, то виноват продукт, вернее, команда, которая его сделала.

Есть масса способов защитить пользователя от ошибок – от масок ввода и принципа «не набирай, а выбирай» до возможности отмены.

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

Функция отмены отправки письма в Gmail

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

Раньше у меня был ноутбук Sharp, у него тоже была кнопка на клавиатуре и она работала мгновенно. Поверьте мне, когда в процессе работы ты случайно промахиваешься мимо Backspace, тыкаешь в Power и теряешь контроль над ноутбуком минут на 10 – это боль.

Платежи и все, что с ними связано

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

На скрине выше форма оплаты в сервисе покупки авиабилетов Southwest Airlines. Выбран радиобатон Credit Card. Но над формой мы видим пункт PayPal, да еще такой заметный с суммой и иконкой. Зачем? К чему он относится? Ну и вообще всего много и как-то кривовато.

Итого

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

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

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

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

Источник: https://olgashavrina.com/.

Комментарии
Продолжить чтение

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

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

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

Популярное

X

Спасибо!

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