Компания
875,52
рейтинг
11 декабря 2013 в 14:14

Разработка → Прототипируем приложение: сценарии, анимация, иконки, юзабилити-тест на примере Моего Мира

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

Наследство

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

На примере профиля видно, как было «до» и что стало «после».



Структура проекта

Первым делом была составлена структурная схема проекта. При подготовке использовалась программа Mindjet, позволяющая создавать огромные mind map'ы. Туда складывались все описания, сценарии, страницы. На картинке приведен небольшой фрагмент mind map'а.



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

Сценарии использования приложения

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

Прежде всего, при составлении сценария выявляется цель, которой будут достигать пользователи на каждом из экранов приложения. В случае уведомлений, цель — быть в курсе событий в своём окружении, то есть всего, что связано с самим пользователем, его друзьями, коллегами и т.д. После получения уведомления пользователь может перейти на соответствующую страницу. В зависимости от типа уведомления (оповещения из игр, приглашения к дружбе, комментирование, отметки «Нравится»...) возможны различные сценарии. Пользователь может переходить в игры или профиль другого пользователя, может написать кому-нибудь сообщение, и так далее. Все эти варианты нужно «прописать» в mind map, отметив возможные пересечения.



Анализ опыта конкурентов

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

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

Также мы анализировали опыт косвенных конкурентов. Например, для нашего раздела музыки это iTunes и другие профильные приложения. Если дело касается фотографий, то фотографировали мы абсолютно во всем — в Instagram, Mobli и т.д. Все это дало нам понимание того, как себя ведет аудитория в различных приложениях.

Сначала бумага

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



Выбор инструмента

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

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

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

В итоге был выбран Fireworks. Это продукт Adobe, достаточно тесно интегрированный с другими адобовскими продуктами — Illustrator, Photoshop — поэтому в нем удобно было проектировать. Итоговые варианты он экспортирует в HTML, что удобно. Кроме того, все можно демонстрировать прямо с телефона своему руководству, коллегам и т.д.

Вайрфреймы

Еще один большой этап — вайрфреймы (wireframes). Обычно он следует за «бумажным» этапом — можно сказать, что это своеобразная фиксация мысли. На данной стадии я все еще не вдаюсь в детали, мне не важно, какого цвета будут кнопки, но я уже композиционно доверстываю блоки, которые у меня родились на бумаге. Уже можно собирать первые кликабельные прототипы и вместе с коллегами смотреть, как что работает, удобно или нет. Это своеобразный конструктор прототипов, благодаря которому наша программа уже начинает материализоваться.

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



Кликабельные макеты

Примерно так это выглядит в Fireworks:



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

Анимация

Мы подошли к следующему пласту работ. Прототипировать анимацию очень важно — это выводит нас на диалог с разработчиком и помогает убедиться что: а) все переходы реализованы логично и пользователь сможет сориентироваться, и б) вы с разработчиком говорите на одном языке и одинаково представляете, как эти переходы будут реализованы.
Иногда можно многое прорабатывать детально (например, drag-to-refresh, который тоже разрабатывался в виде анимации), чтобы потом передать разработчикам. iOS предоставляет хорошие инструменты для работы с анимацией, и обычно программисты делают все своими руками.

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

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

Единый шрифт

Достижению этой идентичности немало способствовал единый шрифт. Было известно, что в мобильном вебе с реализацией проблем не будет: достаточно было выбрать бесплатный шрифт и подключить его через font face для мобильного веба. В iPhone и в Android тоже есть функция «кастомизация шрифтов». Я был несказанно рад, что мы будем еще более идентичны на всех платформах. Однако тут начались проблемы.

Разработчики каждый день подходили ко мне и говорили, что я негодяй и должен согласиться на дефолтные шрифты. Шрифт, который был выбран, Open Sans, на iOS выдавал предупреждения и требования подключить другой шрифт: iOS казалось, что символы кернятся неправильно (в действительности, визуально ничего не менялось). Еще были проблемы, связанные с тем, что у iOS свое представление о межстрочных интервалах — они были просто огромными. Спасибо программистам, которые смогли хаками обойти систему и сделать так, что выбранный шрифт стал выглядеть приятно глазу.

Android, конечно, доставил не меньше проблем. Почему-то он считает, что Navigation bar должен идти с системными шрифтами. При этом если бы этот шрифт был везде одинаковым, все было бы не так грустно. Но нет! В каждой оболочке шрифт свой, любовно выбранный разработчиком. Например, на Samsung это был шрифт, похожий на Comic Sans. Наконец, все нестыковки со шрифтами преодолены, переходим к следующему этапу.

Единая сетка для проекта

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

Изначально нужно было понять, какие константы уже заложены разработчиками операционных систем (например, в iOS это навигационная панель с размером 44 пикселя) и учесть это при построении сетки. В итоге микромодулем был выбран 4х4 пикселя. В основу горизонтального ритма лег шестиколонник с канавкой в 4 пикселя.



Набор иконок

Финальный глянец нашей программе был придан с помощью иконок. Я давно приглядывался к контурным иконкам — очень понравились работы iconwerk. Мы сделали модуль, под который строились иконки Моего Мира. Когда же вышла первая бета iOS 7, я подумал: «Неплохо, попали в тренд». Потом нашлось еще много схожестей, которые мы, не видя iOS 7, уже реализовали в приложении. Поэтому мы одни из самых первых вышли на рынок iOS 7-приложений.



Юзабилити-тестирование

Итак, готово все, вплоть до иконок, настало время тестов. Сейчас станет ясно, насколько верными оказались наши расчёты, насколько точно мы смогли предсказать поведение пользователей, смогли ли соблюсти баланс между функционалом и удобством использования каждого экрана приложения. Юзабилити-тестирование — это всегда вызов для разработчика. Для тестирования нужно предусмотреть и прописать все сценарии взаимодействия: как пользователь будет себя вести, куда будет нажимать и попадать, что мы должны получить от пользователей (чтобы понять, соответствует ли результат нашим ожиданиям).





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



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

Внесение правок и эксперименты

Юзабилити-тесты мы проводили практически в интерактивном режиме. Мы сидели в соседней комнате и наблюдали, как люди, проходящие тестирование, работают с приложением. Скажем, мы заметили, что респонденты реагируют на кнопку «Найти друзей» не так, как задумывалось: тогда мы сразу открывали Fireworks и быстренько меняли «Найти друзей» на «Хорошо». Следующим участникам теста мы предлагали уже новый прототип и смотрели, насколько быстрее они реагируют. Если теория работала — так и оставляли.

Проверка метафор

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

Нас особенно интересовала понятность для пользователей двух метафор. Первая — круг. Если вы посмотрите предыдущие слайды, то в Navigation bar у нас 3 кнопки: стандартный bubble (диалоги), плюс (добавление новой записи), и, собственно, кружок, который родился из концепции будущего логотипа. Когда-то у нас была идея концептуального лого: круг как ореол планеты. Эта метафора, в итоге, перетекла внутрь приложения и стала использоваться для обозначения уведомлений. Что самое удивительное, как только уведомление приходило, все пользователи понимали, что скрывается за этой иконкой.

Вторая метафора, которая нас интересовала — бриллиант. За ним скрывалось автоулучшение фотографий. Как выяснилось, эту метафору пользователи не распознавали; мы оставили бриллиант, но добавили подсказку: когда на него нажимаешь, появляется сообщение «Фото улучшено».

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



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

Время собирать камни

И вот релиз, время собирать камни. То есть отзывы из App Store, Google Play и других источников. Когда видишь комментарий «вообще, где ваш экран настроек?», самое время призадуматься. Если это один отзыв (пользователь поставил нашему приложению всего лишь «двойку»), то его, в принципе, можно пропустить мимо ушей. Но если их несколько, то ты где-то явно ошибся.

Наше приложение в целом было хорошо встречено пользователями. В AppStore и Google Play оно получило в среднем по 4 балла. Часть отзывов, которые мы получили сразу после обновления, касались уведомления о предложении дружбы, где пользователь не мог перейти на страничку предлагающего. Это было исправлено. Другим недочётом оказались трудности с удалением и очищением сообщений, за это пользователи поставили нашему приложению 4 балла. В итоге мы просто добавили шестеренку, которая стала метафорой таких настроек в диалоге.

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

Делитесь своим опытом подобных квестов в комментариях!
Автор: @pleshkov

Комментарии (22)

  • +11
    Ребята из mail.ru, радуете в последнее время!
    Вопрос к проектировщикам и дизайнерам: учитывая, что Fireworks уже больше не будет обновляться, что думаете использовать ему на замену?
    • +2
      Уже смотрим в сторону InVision, но пока окончательно не забрасываем FireWorks, так как он пока отлично подходит для решения задач
      • +1
        Во дела, Fireworks был моей первой программой в которой я создавал небольшие элементы для сайтов, а пользовался я ей т.к. еще не умел работать в Photoshop и мне казалось, что я полный лузер :)
        Но это было тааак давно!
        • +1
          да, для меня тоже Fireworks была первой программой, еще когда его делала Macromedia, но тогда я его забросил и отдал предпочтение Photoshop, все изменилось, когда задачи усложнились в несколько десятков раз
        • +1
          И до сих пор 80% задач дизайна для web намного проще и быстрее сделать в FW, чем в PS.
      • 0
        Посмотрите в сторону NinjaMock
    • 0
      Можно глянуть в сторону Sketch.app например.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Сценарии тестирования писались от руки или в том же MindJet'е? Кто составляет сценарий тестирования?
    • 0
      Писались и в MindJet'e и в Confluence (чтобы задокументировать их). Составляют обычно продуктовые менеджеры совместно с дизайнерами
  • 0
    Очень круто, спасибо.
  • 0
    Что значит заменили «Найти друзей» на «Хорошо»?)
    «Хм, как мне Найти друзей… Ааа, никак, ну Хорошо!)»

    Спасибо за статью)
    • 0
      Это относилось к формулировке алерта "… В Моем Мире зарегистрировано много ваших друзей. Давайте найдем их" у которого 2 кнопки «Не сейчас», «Найти друзей» и второй вариант — «Не сейчас», «Хорошо»
      • 0
        Спасибо за пояснение
      • 0
        «Сделать хорошо» :)

        Но всё же, в чем заключалась реакция пользователей?
        • 0
          В данном примере те кто нажимал на кнопку «Хорошо» меньше затрачивал время на принятие решения и больше выбирали её вместо кнопки «Не сейчас»
          • 0
            Отличный результат.
            Если вас не затруднит, можете так же прокомментировать реакцию на расположение аватаров? (Вы пишете «зато выбрали как раз тот вариант, когда два аватара находятся рядом» — не могу понять, каким образом выбирали.)
            • +1
              Выбирали на юзабилити-тестировании. Показали респондентам 2 картинки и спросили: «О чем это событие», ответы были правильные, но на варианте, где два аватара рядом люди быстрее считывали информацию, именно поэтому его и выбрали
  • 0
    Ребята у вас есть чувак который на пол ставки красиво рисует схемы именно к постам=) это конечно круто, но можно их делать кликабельными на большой размер, а то немного не удобно!
  • 0
    Но вот смотрю на «до» и «после» на первой иллюстрации в посте, и постоянное чувство, что экрана маловато — не проходит.

    Вспомните, когда iPhone со своим прекрасным, огромным на тот момент экраном только появился, как-то все умудрялись в него врисовывать, и без всякой Retina, а сейчас (пытаясь, видимо, необъятность мира показать) постоянно все за край экрана тянется.

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

    Потом, иерархически странно видеть одного размера плашки «фотографии 77» и «друзья 31». На мой взгляд, мои-то фотографии, сколько бы их не было (раз мои — значит, я их уже видел?), никогда важнее друзей не будут (не говоря, что слово «друг» в русском имеет «немного» другое значение, чем «знакомый в интернете»), так же, как не может быть суперважна для пользователя (а не для рекламодателей) кнопка (кнопища!) «Анкета». Там далее по скринам есть эта самая анкета, с грозной надписью «укажите точную дату вашего рождения». «Точную», ага, с учетом, что есть люди, которые не хотят указывать все данные, но готовы либо год рождения указать, либо (чаще) только день и месяц. Полоса моих фотографий, уходящая за край экрана, тоже непонятна — я же, повторюсь, сам их грузил, и явно видел (а захочу пересмотреть — так есть раздел для этого).

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

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

    На самом деле, молодцы, что ищете, и на фоне прошлого mail.ru любое изменение уж хуже точно не будет, но развиваться, мне думается, есть куда, и именно от красивостей и перерисовки сеток конкурентов (хотя, кому сейчас «Мир» конкурент, и кто ему?) в сторону контента.

    Я Миром, честно скажу, бросил пользоваться из-за откровенного забивания сетью на безопасность и приватность. Не знаю, может, оно…
    • 0
      Спасибо за комментарий, постараюсь по абзацам ответить

      1. На самом деле поменялся не только дизайн и представление его, но еще и добавился новый функционал, именно поэтому может сложиться ощущение, что стало больше занимать места
      2. Retina никак не связана с размером экрана, для этого нужно вспомнить iphone4 и iphone4s, вся разница в разрешении
      3. Заход про то, что мои фотографии мне менее интересны, а друзья наоборот логичнее сделать заметнее вполне оправдан, но надо не забывать, что профили мои и других людей должны быть по-максимальному идентичны, чтобы у человека складывалось представление как выглядит его профиль для других
      4. С утверждением про «обои» я согласен, именно поэтому на маленьких экранах мы их не показываем (это видно на скриншоте про сетку), а на больших андроидах и айфонах показываем
      5. Мы стримимся и к качеству контента :) для этого мы показываем для пользователей саджесты интересных людей, на которых можно подписаться и которые как раз и генерируют качественный контент
      • 0
        Я знаю, что такое ретина, я говорил о том, что даже на экране с меньшим физическим разрешением (где мелко написанный текст или сверх меры уменьшенные картинки разбираются очень плохо) 3.5" экрана хватало для вменяемого UI. Просто попытка вытолкнуть «пред светлы очи» юзера все-все-все, есть в приложении, приводит к скученности, и заставляет делать выходящий за границу экрана интерфейс.

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

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

Самое читаемое Разработка