Практика редизайна Гемотеста

или совершенствование знаний интерфейсного дизайна

Заметка № 3

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

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

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

Этапы работы ничем не отличаются о предыдущих работ:
1. Анализ существующего интерфейса.
2. Создание сценария пользователя (flow map).
3. Прототипирование или создание wireframe на основе сценария.
4. Проверка, корректировки, откаты назад (в последнее время всё чаще замечаю вокруг повторяющуюся фразу «лучше сделать сейчас один шаг назад, чтобы потом сделать два шага вперёд»).
5. Подбор референсов.
6. Создание дизайна интерфейса.

<i>Сценарий пользователя, ниже wireframes и готовый интерфейс</i>
Сценарий пользователя, ниже wireframes и готовый интерфейс

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

Первые wireframes

Первые экраны интерфейса и работа над ошибками

Начать дискуссию