Дизайн мобильных приложений *

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



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

Как «проклятие знания» влияет на UX

В начале девяностых в Стенфорде провели эксперимент: одну группу попросили настучать пальцами по столу популярную мелодию, а другую — угадать ее. Абсолютное большинство «барабанщиков» былы уверены, что распознать песню легко, но результаты оказались поразительными: только 2,5% слушателей угадали мелодию.

Суть «проклятия» в том, что «барабанщики» точно знают мелодию, которую они выстукивают, и уверены, что другие просто ДОЛЖНЫ ее угадать. Но другие слышат только аритмичные звуки. Это касается и 70% статей на хабре, которые 2% профи минусуют за баянистость, и вообще любых вещей, которые мы с вами считаем «само собой разумеющимися».

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

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

ПРИМЕЧАНИЕ. Статья вдохновлена беседой с Адой Кэннон, которая защищает интересы разработчиков в проекте интернет-браузера Samsung Internet и в серии наших роликов Google Chrome Developers YouTube «Дизайнер и разработчик». Прослушать более полную запись разговора можно, скачав ее или подписавшись на наш подкаст на платформе iTunes или  Google Play Музыка.

Никогда не задумывались, почему когда вы звоните куда-нибудь в поддержку, вам на время ожидания включают музыку? А вы представьте свои ощущения, если бы вместо музыки была бы мертвая тишина. Канал CNN провел опрос, который показал, что если вызов абонента поставить на удержание, то в 70 процентов случаев звонящий положит трубку в первые 60 секунд тишины: ему может показаться, что вызов оборвался, да и само ожидание кажется дольше. Поэтому смысл «музыки» в том, чтобы заполнить чем-то ожидание и занять время абонента.

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

Переведено в Alconost

Привет, Хабр! Меня зовут Володя Зимин, я — и.о. дизайн-директора в Альфа-Банке. Несколько дней назад, 23 августа, коллеги из МегаФон у себя в офисе провели полезный митап, на котором мы обсуждали CJM.

CJM, он же Customer Jorney Map, помогает понять, как пользователь взаимодействует с вашим сервисом. Как бы вы ни задумывали этот сервис с точки зрения дизайна и интерфейса, пытливый пользователь всегда найдет место, на котором можно споткнуться, нажать что-то не то, или просто сидеть и печально испытывать неудобства.

CJM позволяет увидеть эти места, провести необходимые исследования (это важно), а затем пофиксить всё, что стоит пофиксить.

Мой доклад назывался «Как использовать потенциал CJM по-максимуму: типичные ошибки, совершаемые UX-дизайнерами и продакт-менеджерами — экспертный взгляд изнутри».

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

Под катом — видео с докладом (а также с докладами коллег из МегаФона, Octoberry и Boston Consulting Group) и презентации.

Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-июль 2018.

В мае на Google I/O мы впервые увидели Material Design 2.0. Команда Google провела крупный рефакторинг и выпустила обновленную библиотеку дизайна. В ней появились новые компоненты и анимации. Мы следим за развитием Material Components с самого начала. Сейчас все находится на стадии RC1, и уже скоро выйдет в релиз. Под катом обзор новых и обновленных UI-компонентов для тех, кто еще не пробовал их в работе, но интересуется.

Красивый и привлекательный UI — это важно. Поэтому для Android существует огромное количество библиотек для красивого отображения элементов дизайна. Часто в приложении требуется показать поле с числом или какой-либо счетчик. Например, счетчик количества выделенных элементов списка или сумму расходов за месяц. Конечно, такая задача легко решается с помощью обычного TextView, но можно ее решить элегантно и еще анимацию изменения числа добавить:

На YouTube доступно Demo-видео.

В статье пойдет рассказ о том, как все это реализовать.

Примечание переводчика: сегодня мы публикуем перевод статьи шестнадцатилетней индийской разработчицы Харшиты Арора. Харшита начала изучать графический дизайн с 13 лет. Сейчас она занимается созданием мобильных приложений. В статье Арора делится нюансами разработки дизайна приложений с нуля на примере создания собственного криптовалютного аппа — Crypto Price Tracker.

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

Меню-гамбургер является синонимом мобильного веб-дизайна. Почему? Оно может сделать вас в равной мере и объектом насмешек, и знаменитостью. При всем своем удобстве, тенденция к отказу от него набирает обороты.

По иронии, Facebook – именно ему приписывается «гамбургерная революция» 2008 года – поднял мятеж против него после того, как тесты показали, что навигация поощряет более глубокую вовлеченность.

А Spotify — приложение, основанное скорее на процессе поиска, а не его точности, согласно сообщениям увеличило на 30% заинтересованность в меню, когда начало использовать систему вкладок. Так-то.

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

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

Где-то внутри приложения Яндекс.Денег спрятана кнопка «Предложить идею». Люди нажимают на неё и пишут о своей боли, предлагают помощь или просят денег за невероятные новые возможности, которые они уже придумали, осталось только заплатить им сто тысяч.

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

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

Пост об этом, а ещё о том, как мы сделали свой CSS на Swift.

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

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

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

Для дизайн-проектирования это ставит нам 2 задачи:

1. Превратить большое в маленькое – перевести объемные списки в мобильное представление.



2. Разработать подход к унификации – унифицировать мобильное представление для разных списков в рамках нашей экосистемы. Чтобы пользовательский опыт был единообразным, вне зависимости от модуля, с которым работает пользователь.

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

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

За последние полтора года я работал над двумя продуктами. С первым (BINO CX) прошел путь от нуля до выручки в 1 млн рублей меньше чем за год, а второй развиваю в данный момент.

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

Перевод

Опрос, проведённый компанией Google, выявил 4 основные причины, почему пользователи ненавидят ваше приложение. В этом посте мы предоставим вам решения для того, чтобы превратить эту ненависть в любовь.

Время это один из самых драгоценных ресурсов, которые у нас есть. Большинство людей это знает, включая ваших пользователей. Время настолько ценно, что если время загрузки вашего сайта занимает больше 5 секунд, то вы можете помахать ручкой 75% вашей потенциальной аудитории. Ох.

Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-июнь 2018.

Pokras Lampas

Многие не понимают в творчестве одну очень важную вещь:

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

Поэтому те, кто переживают из-за отсутствия вдохновения, непременно проиграют тем, кто его не ждет и ежедневно оттачивает свое мастерство.

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

ConstraintLayout упрощает создание сложных макетов в Android, позволяя создавать большую часть вашего пользовательского интерфейса с помощью визуального редактора в Android Studio. Его часто называют более мощным RelativeLayout. С помощью ConstraintLayout вы можете избегать множества уровней вложенности при вёрстке сложных экранов.

Недавно была выпущена стабильная версия ConstraintLayout 1.1, и теперь он выглядит очень зрело. Полная его оптимизация ещё больше увеличивает его быстродействие, а новые элементы, такие как барьеры и группы, превращают создание по-настоящему крутого дизайна в достаточно тривиальную задачу.

Горел сентябрь 2007 года. Шёл сентябрь 2017 года, Apple вернули моду на чёлку, представив iPhone X. Неудивительно, что наши друзья из Китая, недолго думая, скопировали этот дизайн у Apple (хотя самая первая мини-чёлка была ещё в Essential Phone, который не взлетел). Но что мы видим сейчас? Huawei P20, Asus Zenfone 5, OnePlus 6, Motorola One Power, Xiaomi Redmi 6 и другие более-менее известные производители уже выпускают или анонсировали телефоны с чёлкой. Samsung и Google остались последними оплотами в этой гонке за хайпом борьбе за безрамочность. Или нет? По слухам, Google Pixel 3 XL тоже будет с этой хренью с изящным вырезом. Что ж, нам, как разработчикам, остаётся только оптимизировать свои приложения под этот вырез, чтобы пользователи смогли продолжать комфортно ими пользоваться. За подробностями прошу под кат.

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

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

Не сумев четко сформулировать проблему, я задал в Instagram вопрос “Какую тему затронуть в следующей статье?”, чтобы выяснить трудности, стоящие перед молодыми специалистами.

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