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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Присылайте свои интерфейсные кейсы на interface@siliconrus.com
0
10 комментариев
Популярные
По порядку
Написать комментарий...

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

2

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

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

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

2

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

1

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

1

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

0

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

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

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

0

Пользуюсь flinto.com

1

https://popapp.in - весьма добен

1

Методы: 6 окон и Сетка
http://romanakamagician.tumblr.com/post/105583503506

0

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

0

Комментарий удален

Читать все 10 комментариев
to Stories – приложение для создания сторис из ссылки, текста, фото или видео

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

Владелец «Билайна» раскрыл сумму сделки по продаже своих сотовых вышек в России — $957 млн Статьи редакции

Новым владельцем стала группа компаний «Сервис-Телеком», которая обслуживает инфраструктуру всех операторов.

Зимний набор на оплачиваемую стажировку в «Тинькофф Старт»: какие задачи решают стажеры

С 1 декабря 2021 года начинается зимний набор в «Тинькофф Старт» — программу оплачиваемых стажировок от «Тинькофф».

ЮMoney сделали виртуальные банковские карты с дизайном из Cyberpunk 2077

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

hh.ru запустил новую платформу kakdela для обратной связи сотрудников компаний

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

«Было приятно, когда наш синтез речи приняли за диктора»: как работает автоперевод и озвучка видео в «Яндекс.Браузере» Статьи редакции

Глава браузера Роман Иванов о том, как нейросети переводят устную речь, почему с их помощью нельзя посмотреть Netflix и уничтожит ли новый сервис языковой барьер в интернете.

Совет управляющих ЕЦБ одобрил новую систему контроля за электронными платежами

После общественных обсуждений в 2020 году Совет управляющих Европейского центрального банка (ЕЦБ) утвердил новую Евросистему контроля за электронными платежами, схемами и устройствами (далее - PISA).

«Мемные» акции и художник, продавший самый дорогой NFT-токен: рейтинг главных людей и идей по версии Bloomberg Статьи редакции

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

Bloomberg
eBay: 64% покупателей не жалеют о своих покупках в Черную пятницу

Черная пятница — одно из главных событий этой недели: тысячи покупателей находятся в поиске лучших скидок. А что происходит после Черной пятницы? eBay опросил около 1000 россиян и выяснил, считают ли они выгодными покупки, совершенные во время самой большой распродажи года.

6 практик зарубежных необанков, которые улучшат опыт пользователей в России

Зарубежные необанки выстраивают digital-first и mobile-first сервисы, ориентирующиеся на проработанный UX, новые модели привлечения и монетизации. Инновации цифровых банков — это индикатор мировых финтех-трендов и важный источник новых продуктовых идей для российских компаний, которые стремятся предложить уникальные реализации и лучший клиентский…

«У нас есть Волож, который нам мозг клюет»: Тиньков посчитал, что в «Яндексе» испугались покупать «Тинькофф» Статьи редакции

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

null