Цитаты из книг автора «Илья Сидоренко»

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

Возможные проблемы. Чрезвычайно важный этап, над которым стоит хорошо подумать. Он может включать в себя как ошибки из-за невнимательности, так и непонимание интерфейса. Например, на первом этапе покупки билетов есть вероятность, что человек ошибется с выбором даты. Это критичная ошибка, а потому цель дизайна – помочь ее избежать. В данном случае не помешает несколько раз показать дату при поиске рейсов и перед оплатой. Таким образом, повышается вероятность, что пользователь заметит ошибку (особенно если помимо цифры вы добавите день недели). Возможное непонимание интерфейса решается тремя способами: упрощением, системой подсказок и сменой дизайнера.

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

Например, при покупке билетов на сайте авиакомпании столбцы таблицы выглядели бы примерно так: сайт, заполнение формы (откуда, куда, кто и когда), поиск подходящего рейса, просмотр подробностей, оплата. Каждый шаг – это не обязательно отдельная страница, так как сценарий можно реализовать в рамках одного экрана.

Давайте посмотрим, как это можно сделать.

У одного сервиса может быть несколько сценариев, и некоторые из них могут конфликтовать между собой. Чтобы выбрать приоритетный, нужно подумать, какой сильнее влияет на показатели бизнеса. В интернет-магазине это оформленный заказ, в социальных сетях – публикация контента. Вернемся к примеру с поиском и приобретением билетов. У пользователей сервиса «Яндекс. Афиша» есть два ключевых сценария: поиск мероприятия и покупка билетов. Они могут слиться в один, но не стоит на это рассчитывать. Чаще всего люди лишь просматривают мероприятия, но как только увидят что-то интересное (или получат зарплату), покупают билеты. «Поиск мероприятия» – не отдельный этап. Он, как и «покупка», состоит из нескольких шагов, каждый из которых необходимо понимать.

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

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

Классический дизайн-процесс включает в себя следующие этапы. 1. Погружение в задачу. Здесь важно понять цели проекта и определить потребности и проблемы целевой аудитории. Многое вам подскажет заказчик. 2. Исследование. Вы анализируете всю полученную от заказчика информацию и проводите самостоятельные исследования с помощью открытых источников. Помимо этого, вы изучаете конкурентов и схожие по механике сервисы, чтобы глубже понять сферу, в которой предстоит работать. 3. Продумывание сценариев. На данном этапе вы глубже понимаете, каким образом человек будет использовать сервис. 4. Создание фреймворка. Фреймворк – структура, вокруг которой строятся все элементы. Он помогает оптимальным образом разместить их на странице. 5. Поиск визуального стиля. На этом этапе нужно окончательно определиться с цветами, стилем типографики и общим посылом

обратите внимание на систему дизайн-студии Олега Чулакова, Mail.Ru Group, «Альфа-Банка» и «Контура»