Веб-дизайн ≠ Мобильный дизайн

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

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

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

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

К тому же палец всегда скользит где-то недалеко от экрана, и каждое касание будет равно клику, соответственно, вероятность ошибки возрастает.

Задумайтесь, где вы чаще всего используете лэптоп? А где смартфон?

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

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

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

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

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

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

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

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

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store