Connect with us

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

Как сделать фейслифт и не превратить его в фейспалм: часть 2

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

Джей лаб

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

/

     
     

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

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

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

1. Слушайте своих пользователей

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

2. Создайте опрос

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

3. Настройте фокус-группы и бета-тестирование

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

4. Используйте A/B-тестирование

Оно позволяет компаниям напрямую сравнивать два интерфейса, показывая разные версии интерфейса для разных клиентов, чтобы понять, какой из них лучше всего резонирует с аудиторией. A/B-тестирование – это быстрый способ получить измеримые данные и идеи для будущей стратегии и отличный способ сбора данных перед началом работы над новым макетом.

5. Подключайте аналитику

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

6. Играйте адвоката дьявола

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

7. Запомните главное правило ​​дизайна пользовательского интерфейса: форма следует за функцией

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

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

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

Инструменты дизайна и прототипирования – что используют разработчики приложений

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

AppTractor

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

/

Автор:

Дмитрий Нор, директор компании SkySoft

  

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

После того, как требования известны, мы приступает к созданию прототипа. В основном мы используем программу Balsamiq Mockups, так как в ней можно делать прототипы для веб-сайтов и мобильных приложений. Программа простая и очень удобная. И с помощью нее можно решить практически любые задачи по созданию прототипов. Иногда мы используем Axure RP. Выбор программы зависит от задач проекта и в основном он делается так: в чем удобнее, там и рисуем.

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

Потом рисуется сам дизайн по прототипу. Иногда рисуется самостоятельно, иногда берутся готовые шаблоны (все опять же зависит от задач проекта и его бюджета). Из программного обеспечения мы в основном используем Adobe Photoshop. Его функционала достаточно для создания тех проектов, которые мы делаем. Иногда мы используем Adobe Illustrator. В этом приложении удобно рисовать векторную графику.

После того, как макет дизайна готов – мы отдаем на согласование клиенту. Если возникают правки – делаем, еще раз согласовываем и запускаем в дальнейшую работу.

Дина Мильштейн, руководитель отдела дизайна EastBanc Technologies

    

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

На старте проекта для каждого мобильного приложения мы вырабатываем дизайн-концепцию на 5-10 экранов и согласовываем с заказчиком.

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

Прототипирование UI/UX — бумага и Sketch

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

Нужен цифровой бренд-бук. Если его нет — надо создать

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

Иллюстрации в Illustrator

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

Интерактивный прототип — Invision

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

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

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

Анимация и поведение — Flinto

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

Нарезка и передача в разработку — Zeplin

Дальше двигаемся итерациями: отрисовали, согласовали с заказчиком, отдали разработчикам в Zeplin. И так до финального релиза — методично и кропотливо трудимся над разделами в рамках согласованной концепции, сохраняя первоначальное качество.

Качественный результат гарантирован процессом

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

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

Евгения Горбунова, Finch

  

Мы уже 10 лет создаем приложения для крупных брендов вроде ТНТ, Спартака, ТВ-3, Столото. В нашей работе мы используем достаточно стандартный набор инструментов: Sketch, Zeplin, Sympli, Adobe Photoshop, Adobe Illustrator.

Для дизайна макетов в основном используем Sketch. Что касается самого процесса разработки дизайна, то тут всегда по-разному. Обычно мы работаем по алгоритму «бумага» → «прототип» → «дизайн». То есть наш дизайнер сперва тратит время на поиска решения на бумаге, затем начинает рисовать прототипы и макеты в Sketch и только после этого занимается дизайном. На последнем этапе, как правило, клиенты оставляют наибольшее количество правок: цвета не те, иконки другие, форму стоит поменять и т.д. Поэтому у нас бывали случаи, когда после финального дизайна, мы начинали все по новой и вновь ныряли с головой в проект, чтобы найти другое решение.

Ольга Костина, ведущий UI/UX дизайнер Seven Winds Studio

   

В нашей студии разработка дизайна мобильных приложений происходит следующим образом. На основе ТЗ создаётся прототип. До настоящего времени мы использовали для прототипирования NinjaMock, но планируем перейти на другую платформу. Сейчас присматриваемся к другим сервисам, среди которых Marvel, Invision и Flinto.

Дизайн интерфейса создаём в Sketch, и затем экспортируем готовые экраны в Zepelin для работы верстальщиков с ними. Иногда, наравне со Sketch, используем Figma. Этот сервис удобен тем, что над одним проектом могут работать несколько дизайнеров одновременно, и все изменения сохраняются в одном проекте, c которым впоследствии работают те, кто верстает экраны.

Юлия Гулюк, Grapheme

    

Раньше для проектирования и разработки интерфейсов мы использовали связку Sketch Zeppelin, а для демонстрации дизайна клиенту мы создавали интерактивные прототипы в Marvel или Invision. Когда макет дизайн был утвержден, мы прибегали к помощи моушн-дизайнера, чтобы упростить коммуникацию с верстальщиками. Он визуализировал идеи команды дизайнеров, чтобы разработчикам можно было наглядно объяснить, какие эффекты задумали дизайнеры и как их нужно реализовать. В общем, это был достаточно сложный процесс. Он требовал применения различных инструментов и отнимал много времени специалистов. Особенно много времени и сил уходило на коммуникацию. Но самым большим недостатком этого подхода была невозможность установить Sketch на любые другие платформы, кроме macOS.

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

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

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

Подкаст AppTractor: дизайн мобильных приложений

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

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

UX и UI мобильных приложений: что связывает дизайн и маркетинг

Что связывает дизайн и маркетинг? Что такое UX/UI дизайн? И почему хорошо спроектированное приложение и грамотная маркетинговая кампания — это залог успеха проекта? Рассказывает Татьяна Гуменюк, дизайнер агентства Netpeak.

Netpeak

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

/

Автор:

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

Чем отличается UX от UI дизайна?

В идеале дизайн объединяет в себе форму и функции, свойства и эстетические проявления. UX (User Experience) дизайн отвечает за функции и свойства, это процесс создания продукта, который полезен, легок в использовании и приятен для взаимодействия. Задача UX дизайнера — привести пользователя к конечной цели, помочь ему «решить проблему».

UI дизайн — это визуальное оформление «изделия»: какие использовать цвета, удобно ли будет человеку попадать пальцем в кнопки, читабельным ли будет текст.

Задача UX/UI дизайна — «продать» товар или услугу через интерфейс. Именно на основе работы UX/UI дизайнера пользователь принимает решение: «Быть или не быть?», нравится или не нравится.

Разница между UI и UX-дизайном

С чего начинается UX?

У исследований, которые проводят на первых этапах UX дизайна есть много общего с маркетинговыми. Например, анализ конкурентов и рынка, определение ЦА и бизнес модели.

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

Зачем проводить бенчмаркинг дизайнеру?

  1. Определить сильные и слабые черты оцениваемых объектов.
  2. Расширить понимание рынка и бизнес-домена*.
  3. Развить собственное видение проекта и выработать новые идеи.
*Бизнес-домен (в рамках разработки ПО) — предметная область, которая определяет набор стандартных требований, специальной терминологии и функциональности (например, развлечения, туризм и путешествия или социальные сервисы).

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

  1. Определит основные и вторичные задачи пользователей.
  2. Определит мотивацию пользователей.
  3. Выявит типовые проблемы, с которыми сталкиваются пользователи.
  4. Выделит приоритеты в разрезе пользовательских потребностей.
  5. Сформирует собирательный портрет пользователя.
  6. Найдет предпосылки для выстраивания эмпатической связи.

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

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

11 советов от мастеров мобильного UX

Четыре правила создания удобного дизайна

UI (User Interface) — это то, что у многих людей сразу ассоциируется со словом «дизайн»: цвета, графика, иконки и логотип. Это средство связи между человеком и системой. Для того, чтобы дизайн был удобен, решал проблему и «продавал» продукт существует ряд правил и тенденций, которым следуют UX/UI дизайнеры для достижения своей цели:

  1. Упрощение пользовательского взаимодействия. Когда пользователь взаимодействует с приложением, у него есть определенная цель. И, как правило, чем меньше усилий пользователь прилагает для достижения этой цели, тем лучше пользовательский опыт. Хороший пример — дизайн линейного пути, когда каждый шаг пользователя сопровождается выполнением только одного действия.
  2. Цвет как функциональный элемент. Выбор цвета продиткован не только  эстетикой, это часть пользовательского взаимодействия. Цвет — инструмент акцентирования на главном. Например, дизайнеры могут использовать цвета, чтобы установить визуальное различие между разными типами уведомлений.
  3. Диалоговый дизайн. Пользователи часто использует только три приложения, и как минимум одно из них — мессенджер. Люди любят общаться. Поэтому чатботы и голосовые помощники, усиленные искусственным интеллектом, стали трендами последних лет.
  4. Эмоциональное взаимодействие. Даже в эпоху интерфейсов командной строки мы использовали эмотиконы (смайлики), чтобы донести до других свои чувства. Людям свойственно устанавливать эмоциональную связь со всеми используемыми продуктами. Как следствие, при взаимодействии с продуктами мы ожидаем реакций похожих на человеческие.

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

10 законов UX-дизайна

Чем схожи дизайн и маркетинг?

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

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

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

Мобильные UX-паттерны, которые вы используете неправильно

Выводы

  1. Задача UX/UI дизайна — «продать» товар или услугу через интерфейс. Именно на основе работы UX/UI дизайнера пользователь принимает решение: «Быть или не быть?», нравится или не нравится.
  2. UX (User Experience) дизайн отвечает за функции и свойства, это процесс создания продукта, который полезен, легок в использовании и приятен для взаимодействия. UI дизайн — это визуальное оформление «изделия»: какие использовать цвета, удобно ли будет человеку попадать пальцем в кнопки, читабельным ли будет текст.
  3. Чтобы дизайн был удобен, решал проблему и «продавал» продукт существует ряд правил, которым следуют UX/UI дизайнеры для достижения своей цели:
  • диалоговый дизайн;
  • цвет как функциональный элемент;
  • упрощение пользовательского взаимодействия;
  • эмоциональное взаимодействие.

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

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

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

Подкаст AppTractor: дизайн мобильных приложений

В новом выпуске с Викторией Доброденчук из Autodoc.de мы обсуждаем дизайн мобильных приложений и связанные с ним вопросы.

AppTractor

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

/

Автор:

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

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

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

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

Забавные экраны ввода пароля

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

AppTractor

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

/

Автор:

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

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

Реклама

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

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

Вакансии

Популярное

X
X

Спасибо!

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