12.01.2023
Хороший интерфейс мобильного приложения — это не только красивый дизайн. По данным UXeria.com 70% всех онлайн-стартапов терпят неудачу из-за плохо проработанного интерфейса своих продуктов. Как разработать хороший интерфейс? Какие ошибки можно совершить при создании визуала? Разбираем в статье.
Что такое интерфейс мобильного приложения и чем он отличается от веб-сервисов
Представьте: вы приходите в салон, чтобы сделать стрижку. Сначала нужно записаться на нужное время у менеджера. Вы обращаетесь к человеку на ресепшене и спрашиваете, когда будет свободен мастер. Но менеджер вас не понимает: молчит или отвечает невпопад, а может, вообще говорит на другом языке. Возможно, это крутой салон, и мастер хорошо знает свое дело, но вы наверняка разозлитесь и уйдете оттуда, так и не записавшись.
В этой ситуации менеджер, посредник между вами и услугой, сработал плохо. Интерфейс приложения — это такой же посредник между пользователем и функциями сервиса.
Как создать графический интерфейс на Python с нуля
В общем понимании интерфейс или UI (user interface) — это визуал, внешний вид приложения. Это понятие тесно связано с пользовательским опытом (user experience или UX). Одно невозможно без другого, поэтому интерфейс еще называют UI/UX дизайном. Получается, UI отвечает за облик продукта, а UX — за его логику.
Логика так же важна, как и привлекательные иллюстрации, цвета и анимации. Представьте красивое приложение, в котором много интересных дизайнерских решений. Но структура хромает: например, чтобы зарегистрироваться, нужно ввести много данных на нескольких экранах. Несмотря на визуальную привлекательность, пользователь вряд ли заинтересуется сервисов, если он будет неудобным. UX решает эту проблему и отвечает за простоту, понятность и удобство.
Проработанный и функциональный UI/UX дизайн нужен каждому онлайн-продукту: мобильному и веб-приложению, сайту.
Особенности интерфейса мобильных приложений
Есть большая разница между разработкой веб-интерфейса и интерфейса для мобильных приложений. Вот некоторые из отличий:
Размер экрана. Дизайнеру мобильных интерфейсов нужно уместить всю необходимую информацию на экране длиной 10-12 см. В отличие от десктопа, мобильный дизайн может включать гораздо меньше кнопок, иконок, текста.
Управление. На компьютере человек выполняет действия с помощью мыши, а на смартфоне — только с помощью пальцев. Нужно, чтобы все кнопки были достаточно большими. Также в приложении можно реализовать и других механики — например, смахивание экранов,
Ориентация экрана. Когда человек пользуется приложением, он может развернуть смартфон горизонтально. Многие платформы, например, Tik Tok, не адаптируются при повороте устройства. Но есть программы, где нужно учесть смену ориентации экрана. Например, это стриминговые сервисы.
Если бы видео на Youtube или Netflix нельзя было развернуть горизонтально, пользоваться приложением было бы неудобно.
Изучение TKinter за 8 минут / Разработка GUI программы на Python
Производительность смартфонов. Множество сервисов борются за внимание и время пользователей, поэтому скорость отклика должна быть очень высокой, а ошибки сведены к минимуму. Во многом это зависит от веса приложения и сложности интерфейса. Тяжелые анимации и 3D-эффекты могут затруднить использование сервиса.
Примеры хорошего и плохого визуала
Чтобы показать особенности разработки интерфейса приложения на практике, мы нашли примеры качественных и неудачных UI/UX дизайнов мобильных сервисов.
В качестве неудачного примера возьмем приложение магазина Леруа Мерлен. Его пользователи недовольны выбором адреса, длинной формой связи, неработающими кнопками. Похожих отзывов на странице сервиса очень много. Помимо этих проблем есть и другие:
Главная страница приложения смотрится скучно и неинтересно. Разделы каталога расположены горизонтально, пользователю нужно листать их вправо. При этом большая часть занята странным блоком «Рекомендуем» из товаров, которые вряд ли заинтересуют человека.
Если провалиться в один из разделов, откроется список подразделов, который раскрывает еще один список. Проматывать это очень неудобно.
Чата с поддержкой в приложении нет. Если у клиента возник вопрос, ему предлагается заполнить длинную форму обращения. Ответ сотрудника при этом приходит на почту. Если пользователь столкнулся с браком, такой сервис разозлит его еще больше.
Все эти недоработки мешают пользователям сделать заказы, вызывают недовольство и увеличивают количество негативных отзывов.
Пример хорошего UI/UX — приложение магазина Hoff.
На главной странице — карусель с баннерами, которые сразу привлекают внимание. Дальше — блок с разделами, которые могут понадобиться пользователю — «Акции», «Магазины». Потом — выгодные предложения от сервиса. Дизайн хорошо выстроен логически и управляет вниманием клиента. Весь интерфейс направлен на то, чтобы показать человеку ассортимент, помочь с выбором и снять все вопросы.
Коммуникация с клиентами налажена гораздо лучше, чем в Леруа Мерлен. В приложении можно отправить обращение или позвонить в поддержку. Экран обращения оформлен чисто и дружелюбно.
Также можно сравнить эти два примера чисто визуально. Оба бренда используют свои цвета, но в приложении Леруа почти нет ярких акцентов. Кнопки выделены серым, разделы в каталоге никак не оформлены. А Hoff использует свой фирменный красный цвет в иконках, разделителях, плашках скидок и кнопках. Поэтому в целом дизайн Hoff смотрится интереснее.
Кто создает интерфейс мобильных приложений?
Созданием визуала занимаются UI/UX дизайнеры. Это специалисты, которые не только хорошо владеют графическими редакторами: они умеют строить пользовательские пути и знают, как сделать сервис интуитивно понятным.
Графические или веб-дизайнеры не смогут справиться с этими задачами. Специалист должен знать основы разработки интерфейсов мобильных приложений, разбираться в специфике разных смартфонов. Также UI/UX дизайнер должен примерно понимать, как происходит дальнейшая разработка и уметь работать в команде с программистами.
В последнее время становятся популярны конструкторы мобильных приложений, где любой может создать свою программу быстро и без особых знаний. Есть множество платных и бесплатных конструкторов с разными возможностями. В них можно создать простое приложение с удобным интерфейсом, например, для тестирования идеи. Но если вам нужен функциональный коммерческий проект, лучше обращаться к опытному дизайнеру.
Разработка интерфейса мобильного приложения: как работает команда Q-Digital
У нашей команды создание интерфейса делится на следующие этапы:
- Обсуждение концепции с заказчиком
Сначала мы выясняем, есть ли у заказчика свое представление о дизайне, типографике, цветах и акцентах. Если есть какие-то пожелания, мы стараемся учесть их в дальнейшей работе.
- Исследование рынка
На этом этапе мы смотрим, есть ли у проекта аналоги, насколько они популярны, в чем их фишки. Также мы подбираем качественные референсы, чтобы в работе опираться на лучшие практики.
Когда концепция ясна, а конкуренты изучены, мы приступаем к созданию вайрфреймов. Это схематичные монохромные изображения будущих экранов с расположением основных элементов и текста. Некоторые дизайнеры набрасывают схемы от руки, мы же пользуемся графическими редакторами — Figma Sketch. Вайрфреймы мы согласовываем с заказчиком: на этом этапе легче внести правки в логику, чем потом. Иногда мы пропускаем этот этап, например, когда нужен редизайн продукта, а не создание с нуля.
- Тест дизайн-концепции
Это небольшая презентация экранов в цвете и с контентом. Дизайнер прорабатывает несколько экранов, чтобы показать заказчику, как все будет выглядеть в итоге. Если на этом этапе все в порядке, двигаемся к детальной проработке всех экранов.
- Реализация дизайн-концепции
Расположение всех элементов и цвета утверждены — команде остается доработать все экраны в заданном стиле. На этом этапе добавляются все иконки, шрифты, логотипы, анимации. Итог работы UI/UX дизайнеров — UI-kit и прототип интерфейса. UI-kit — это набор со всеми элементами и цветами визуала. На него ориентируются верстальщики и программисты в дальнейшей работе.
Дальше макеты экранов передаются разработчикам. Но работа дизайнеров над проектом не заканчивается: они контролируют верстку, отвечают на вопросы коллег, проверяют готовый дизайн.
Интерфейс для Android iOS: есть ли разница?
Дизайны Android и iOS немного различаются. У Google и Apple даже есть отдельные гайдлайны с рекомендациями для дизайнеров. UI/UX дизайнеры должны знать эти различия, чтобы на разных устройствах все элементы интерфейса мобильного приложения отображались корректно. Вот некоторые из этих отличий:
Навигационная панель. У Android основная навигационная панель расположена сверху, а у iOS — снизу. При этом у андроидов есть дополнительный встроенный навигационный инструмент с кнопкой «back», которая позволяет перейти на шаг назад. Чтобы перейти к предыдущему экрану на айфонах, надо свайпнуть слева направо.
Панель поиска. Google советует добавлять поиск к верхней панели навигации. У Apple больше возможностей: можно прикрепить строку поиска рядом с панелью навигации или поместить отдельно в другом подходящем месте.
Контекстное меню. Привычная для андроида механика — выпадающее меню при нажатии на кнопку с тремя точками. Оно должно располагаться наверху.
Вызвать такое меню в iOS можно долгим нажатием на элемент. Иногда оно также прячется за тремя точками, но внизу страницы.
Шрифт. Стандартный шрифт для Android ― Roboto, а для iOS — San Francisco. В Google и Apple утверждают, что с системными шрифтами приложение будет более адаптировано к операционным системам. Но, если везде использовать одни и те же шрифты, платформы будут смотреться одинаково. Чтобы уникализировать сервис, можно использовать стандартный шрифт как основной, а для заголовков взять другой.
UI-дизайн
Пишите полезные письма, отправляйте важные рассылки в мессенджерах и по SMS, запускайте чат-ботов.
Все инструменты в одном сервисе.
UI-дизайн (от англ. user interface design, дизайн пользовательского интерфейса) — это создание визуальной части приложения или сайта: экранов, кнопок, иконок. UI-дизайнер следит, чтобы продукт выглядел красиво и единообразно.
UI-дизайнер придумывает, как будут выглядеть иконки и кнопки, какие цвета и шрифты будут использованы в приложении
UI-дизайн меняется вслед за тенденциями. Например, в 2012 году в моде были объемные иконки, в 2017 году они стали проще, в 2022-м — дизайн совсем плоский
Для чего нужен UI-дизайн
Дизайн определяет первое впечатление пользователя от продукта на 94%. К такому выводу пришли исследователи из Австрии.
46,1% пользователей решают, можно ли доверять сайту, на основании его дизайна, обнаружили ученые из Стэнфорда.
59% пользователей выберут контент с красивым дизайном, а не контент с минимальным оформлением. Это результаты исследования компании Adobe.
Пользователь понимает, нравится ли ему дизайн сайта, за 5 миллисекунд, выяснили в канадском исследовании.
54% пользователей ожидают, что контент будет выглядеть красиво, также обнаружили в Adobe.
Особенно важен UI-дизайн для привлечения новых клиентов, которые ничего не знают о компании или продукте. Например, человек ищет ветеринарную клинику, чтобы обследовать своего питомца. Поиск выдаст ему десятки сайтов, среди которых надо выбрать один. Дизайн становится первым фильтром: сайт устаревший или неудобный — иду на следующий.
Легко предположить, на сайте какой клиники пользователь задержится дольше
Стоит уточнить, что первый фильтр в выборе сайта — это не столько красота дизайна, сколько возможность максимально быстро закрыть свою потребность в товаре или услуге. Есть разные типы пользователей. В промышленном сегменте, например, какой-нибудь менеджер закупок бетона вообще не обратит внимание на красоту.
Дизайн-директор Mailfit
Отличия UI от UX
User experience (UX), или пользовательский опыт, — более широкое понятие. UX включает все впечатления от работы с сайтом или приложением: насколько все было удобно и понятно, быстро ли грузились страницы, почувствовал ли пользователь, что о нем позаботились.
UI — одна из важных составляющих UX: внешний вид сайта или приложения влияет на то, какие впечатления получит пользователь.
Более того, внешний вид интерфейса может даже искажать впечатления о юзабилити — удобстве использования. Японские исследователи Масааки Куросу и Каори Кашимура выяснили это в результате эксперимента. Они сконструировали 26 интерфейсов банкомата и просили участников эксперимента сказать, какие из них кажутся более простыми для использования. Более высокую оценку всегда получали интерфейсы, которые выглядят более гармонично, даже если они на самом деле не были сконструированы с учетом принципов юзабилити.
Примеры интерфейсов из эксперимента Куросу и Кашимура: удобный, но некрасивый; удобный и красивый; неудобный и некрасивый; неудобный, но красивый. Четвертый интерфейс кажется более удобным, чем первый, хотя на самом деле он менее удобный
На самом деле, разделение на UX, UI и юзабилити весьма условное — часто они связаны настолько тесно, что нельзя провести четкую грань. Поэтому и всеми аспектами дизайна в компании чаще всего занимается один человек — UX/UI-дизайнер или дизайнер интерфейсов.
UX/UI-дизайнер заботится о внешнем виде интерфейса: создает гармоничные композиции на экране, рисует иконки, но также и улучшает пользовательский опыт за счет принципов юзабилити
Этапы разработки UI
Хороший интерфейс незаметен: он просто помогает получить нужный результат от сайта или приложения. А если постараться его проанализировать, кажется очевидным, что кнопки должны располагаться так, а цвета должны быть такими. Это же естественно.
На самом деле, если интерфейс производит такое впечатление, значит, над ним хорошо поработали. Вот как это обычно происходит. Все начинается с UX — сбора информации, тестирования гипотез и создания прототипа.
Создание прототипа (UX). Сначала нужно понять, как сайт или приложение будет устроен изнутри: какие у него будут экраны, как они будут связаны между собой. Это каркас продукта. Цвета, шрифты, иллюстрации появятся позднее.
На этом этапе основное внимание уделяется UX и юзабилити, потому что графической части интерфейса еще нет. Дизайнер создает низкодетализированный прототип интерфейса — такие наброски еще называют вайрфреймами (от wireframe, проволочный каркас).
В вайрфреймах картинки обозначены прямоугольниками, текст — полосками, потому что на данном этапе важнее принципиально понять, как они будут расположены
Далее переходят к проработке визуала (UI).
Создание визуальной концепции (UI) состоит из нескольких этапов:
- Составление мудбордов. Можно брать референсы как для продукта в целом так и для каждой его части, постепенно заполняя весь прототип примерами по методу прогрессивного джипега.
- Подготовка общей концепции, наброски основной стилистики, работа с дизайном «широкими мазками».
- Детальная прорисовка дизайна и всех элементов интерфейса. На этом этапе создается мокап. Английский термин mockup можно перевести как «макет в натуральную величину». Его используют, потому что дизайнер создает мокап не просто на листе в фотошопе, а внутри реального интерфейса телефона или браузера, с учетом пропорций.
Часто дизайнер готовит сразу несколько мокапов для разных устройств
- Подготовка интерактивного прототипа. По сути, это кликабельный мокап: можно нажимать кнопки, и будут открываться соответствующие экраны. Такой прототип помогает оценить интерфейс без затрат на его разработку.
-
Прототип выглядит как настоящее приложение, но работает внутри графического редактора, например Figma
Если продукт большой и сложный, то интерактивный прототип лучше делать уже на этапе подготовки вайрфреймов. Это важно, потому что для тестирования гипотез часто нужно уже в самом начале работы проверять переходы, клики и логику пути пользователя.
Источник: www.unisender.com
Разработка пользовательского интерфейса: зачем её заказывать
В повседневной жизни мы постоянно сталкиваемся с интерфейсами. Это и сайты соцсетей, и элементы управления в салоне автомобиля, и пульт ДУ для телевизора, и голосовое управление умным домом, и панель кнопок в лифте.
Выходит, мы используем один продукт для управления другим продуктом. Но давайте не будем перечислять все явления в нашей жизни, а поговорим непосредственно о и приложениях и о том, как сделать их использование удобным.