Лого vc.ru

Диаграмма связей, бумажный макет и еще 4 способа проектирования пользовательских интерфейсов

Диаграмма связей, бумажный макет и еще 4 способа проектирования пользовательских интерфейсов

Дизайнер Джонсон Лу в своем блоге рассказал о способах проектирования интерфейсов — от описания проекта на бумаге до создания работающего прототипа.

В рубрике «Интерфейсы» — перевод заметки. 

Поделиться

Сервисы прототипирования

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

Примеры приложений для протипирования: Invision App, Blueprint, Marvel App и Balsamiq Mockups.

Прототипирование на бумаге

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

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

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

Диаграмма связей

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

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

Стенография переходов

Метод заключается в построении карты переходов, которая поможет дизайнерам наиболее точно определять поведение пользователя на странице. Впервые такой прием описал Раян Сингер в блоге Signal v. Noise.

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

Словесное описание проекта

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

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

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

Черновой макет

Один из первых прототипов Wii U Miiverse

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

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


Присылайте свои интерфейсные кейсы на interface@siliconrus.com
Статьи по теме
10 полезных ресурсов для разработчиков интерфейсов11 марта 2015, 17:31
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

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

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

Находил в интернете блокноты с сетками, но жаба задушила покупать и решил сделать себе библиотечку с сетками и печатать их на обычном принтере по мере необходимости. Вот версия на данный момент: gridprint.in

Сайт без коммерческой выгоды, так что не сочтите за рекламу ;)

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

А это уже кому как легче. Все зависит от привычек.

0

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

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

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

0

Ни слова про верстку, маки, скетчи и шрифты? автор лох и не шарит.

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
ave ego

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

Роскомнадзор заявил об отсутствии претензий к Netflix из-за «непопулярности сервиса» в России
0
Борис Моренко

Название отличное. Лучше только stalin.tv)

Французский видеосервис Molotov привлёк $22 млн от Михаила Фридмана и других инвесторов
1
Yuriy Belonozhkin

В начале 2016 года мы шифровали как могли (Эзоповым языком и смайликами)

Акционеры Facebook раскритиковали инвестора Андриссена за помощь Цукербергу втайне от совета директоров
1
Yuriy Belonozhkin

Перед перезапуском Secret он решил поразмяться на блог-сервисе)

Сооснователь Secret запустил анонимную блог-платформу IO
0
Николай Анников

Основатель компании владеющей супер защищенным мессенджером не смог сохранить переписку в тайне?

Акционеры Facebook раскритиковали инвестора Андриссена за помощь Цукербергу втайне от совета директоров
0
Показать еще