Monday, May 07, 2007

Четыре правила UI дизайна

Как построить хороший дизайн? Почему один дизайн хорош, а другой плох? С чего начать?
Эти и масса других вопросов возникает в голове молодых дизайнеров на начальном этапе. Самое смешное, что ответить на них в двух словах невозможно.


Для начала рассмотрим четыре золотых правила дизайна (к слову говоря, правила могут чуть-чуть менять свою суть, если речь идет о специализированной ветке дизайна, например, об UI дизайне).
Сравните:

    Приминительно к дизайну в целом:
  • 1. Proximity
  • 2. Repetition
  • 3. Arranging
  • 4. Contrast
    Приминительно к UI дизайну:
  • 1. Organizing and Grouping
  • 2. Consistency
  • 3. Alignment
  • 4. Whitespace
Остановимся подробнее на правилах UI дизайна. И сразу начнем с картинок. Этот немного упрощенный пример, который был продемонстрирован на Конференции по разработке ПО в EPAM Systems, хорошо иллюстрирует все правила. Исходный вайфрэйм:
process-1.gif 
I. Элементы формы организованы. Под организацией понимается логическое структурирование элементов на экране. Посмотрите на форму и подумайте, на какие части или смысловые группы можно ее разбить.
process-2.gif 
II. Элементы формы сгруппированы. Группировка, вдобавок к организации, хорошо работает в формах, логически объединяя связанные элементы.
process-3.gif 
III. Элементы формы выровнены. Выравнивание — очень мощный прием. Невозможно создать удобную форму, если пропущен данный этап.
process-4.gif 
IV. Элементы формы приведены к одному стилю. Приведение к общему знаменателю позволяет решить ряд задач, таких, например, как узнаваемость и типизация блоков. Согласитесь, что при прочих равных поля формы и их названия должны выглядеть одинаково.
process-5.gif 
V. В элементы формы добавлено пространство. Добавление пространства позволяет рассредоточить информацию на экране и сосредоточится не на форме в целом, а на отдельных ее элементах. С приходом моды на Web 2.0 методика особенно популярна :)
process-6.gif Итак, применив все правила на практике, имеем неплохой вайфрэйм, готовый к употреблению :)


RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: , ,

О терминах

  • UI / Пользовательский интерфейс — достаточно широкое понятие, характеризующее все многообразие средств и технологий, при помощи которых пользователь общается с различными устройствами, это точка соприкосновения «пользователя» и «системы».


  • GUI / Графический пользовательский интерфейс — Разновидность пользовательского интерфейса, при котором система средств для взаимодействия пользователя с системой основанною на использовании графических образов.

  • IA / Информационная архитектура — одна из дисциплин проектирования пользовательских интерфейсов, представляющая собой совокупность методов и приёмов структурирования и организации информации.
  • Usability / Юзабилити — концепция разработки пользовательских интерфейсов систем, ориентированная на максимальное психологическое и эстетическое удобство для пользователя.
  • Design / Дизайн — понятие, объединяющее художественно-эстетическое творчество и умения с научно-обоснованной инженерной практикой в сфере массового индустриального производства и окружающего нас мира. Иными словами дизайн – это искусство создавать что-то одновременно красивое, удобное и функциональное, учитывая современные тенденции в мире, культурные особенности пользовательских групп и т.п.
  • Designer / Дизайнер — человек, профессионально занимающийся дизайном. Профессия дизайнера включает в себя ряд специалиазаций: промышленный дизайнер, дизайнер-полиграфист, дизайнер пользовательских интерфейсов, веб-дизайнер и т.д.
  • Web Designer / Веб-дизайнер — дизайнер, осуществляющий свою деятельность преимущественно в сети, а именно – например, создание дизайна веб-сайтов.
  • UI Designer / Дизайнер пользовательских интерфейсов, UI-дизайнер — дизайнер, занимающийся проектированием пользовательских интерфейсов.
  • Information Architect / Информационный архитектор — специалист в области структурирования, реорганизации и правильной подачи информации. Часто работает в паре с UI дизайнером для построения пользовательского интерфейса.
  • Front-end Developer / Front-end разработчик — специалист, разрабатывающий набор прототипов информационных систем под руководством UI-дизайнера. Ему, как правило, необходимы навыки в HTML, DHTML, XTML, CSS, Macromedia Flash, ActionScript, системах управления контентом, кросс-браузерной верстке.

RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: ,

Раз-два-три-четыре-пять

В широком смысле, дизайн пользовательского интерфейса — это комплексный и многоаспектный итерационный процесс проектирования интерфейса взаимодействия (точки соприкосновения) человека и системы, который обычно включает в себя пять следующих дисциплин:
  • Сбор и изучение функциональных требований к системе, анализ типичных пользователей;
  • Информационная архитектура и построение скелетов пользовательского интерфейса;
  • Юзабилити-тестирование;
  • Создание графического дизайна пользовательского интерфейса;
  • Прототипирование пользовательского интерфейса.

Фаза 1. Сбор функциональных требований

Любой пользовательский интерфейс вырастает из конкретной задачи на разработку конкретной функциональности приложения. Данный этап разработки подразумевает под собой сбор, систематизацию и анализ требований к системе. Также анализируются и систематизируются возможные пользователи системы (персонажи, актеры).
Сбор и анализ требований выполняет бизнес-аналитик.

Фаза 2. Информационная архитектура

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

Фаза 3. Юзабилити-тестирование

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

Фаза 4. Графический дизайн пользовательского интерфейса

Графический облик интерфейса создает UI-дизайнер. Это наиболее творческая работа, требующая большого опыта, усидчивости и скрупулезности. На этом этапе интерфейс системы приобретает необходимый законченный вид. Часто заказчик уже имеет брэнд бук или стайл гайд (brand book и style guide — набор описательной документации для дизайнера о корпоративных стандартах заказчика), задача дизайнера — угодить всем, разработать такой дизайн, который бы соответствовал всем требованиям системы, удовлетворял бы заказчика и сочетался бы с задумками информационного архитектора. На данном этапе может понадобиться помощь смежных специалистов: иллюстратора (художника), 3D-моделлера и других.

Фаза 5. Прототипирование пользовательского интерфейса

Завершающий этап разработки, который подразумевает под собой создание законченных прототипов экранов системы. Прототипы позволяют обнаружить проблемы функционального характера будущей системы на раннем этапе и устранить их до того, как проект уйдет в разработку к программистам. В зависимости от предназначения, прототипы могут быть: полнофункциональными, демо-версиями, презентационными или же шаблонными. Прототипы разрабатываются front-end разработчиком под руководством UI-дизайнера.


RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: ,

Раз и навсегда. Мифы о дизайнерах

Давайте развеем самые популярные мифы о дизайне и дизайнерах.

Миф 1. Дизайнер — это человек, умеющий рисовать. Есть очень мало общего между профессией дизайнера и иллюстратора (или художника, если хотите). Можно сказать так: иллюстратор — это человек рисующий, а дизайнер — это человек придумывающий.


Очень тонкая грань проходит между дизайнерами любой квалификации и области и художниками, но ее всегда можно почувствовать. Художник встает и думает каждое утро примерно так: «что бы мне такое нарисовать» и руки так и чешутся нарисовать очередное произведение искусства, которое, бесспорно, будет радовать других людей своей гениальностью. В этом смысле цели, желания и действия дизайнера всегда сильно смещены в сторону практики. Дизайн же был, есть и всегда останется практической дисциплиной. Это значит, что возникновение самой профессии дизайнера связано с необходимостью что-то улучшить, перепроектировать, переделать. Настоящий дизайнер никогда не возьмется за работу, основная задача которой — разработать, например, красивый сайт.

Миф 2. По сравнению с другими специальностями работа дизайнера проста и не требует никакого умственного напряжения. Так могут говорить только люди, далекие от самой профессии. Я бы сказал так: нет более сложной и одновременно более интересной профессии, чем дизайнер. Если сомневаетесь, обратитесь к переводу слова «design»:

Design [di’zain]
сущ.: замысел, план, цель, умысел, интрига(!);
гл.: задумывать, придумывать, разрабатывать, замышлять, проектировать, конструировать;
Дизайнер стоит в одном ряду с архитектором, скульптором, модельером и прочими замечательными профессиями. Профессия дизайнера уникальна широтой охвата предметных областей и технологий. Профессиональный дизайнер никогда не привязывается к конкретным технологиям и идеям, сначала он придумывает, что необходимо разработать и доказывает почему это необходимо разрабатывать, а уже потом как это необходимо реализовать. В конце концов, дизайнер может обратиться к иллюстратору для того, чтобы нарисовать иллюстрацию или каким-либо образом оформить его идею, но сама идея, способы достижения цели, интерактивные составляющие идеи, смысл и взаимодействие отдельных ее компонентов — все это прорабатывается именно дизайнером и вынашивается в его голове.

Миф 3. Дизайнером не становятся, дизайнером надо родиться.
Отчасти это так, но только лишь отчасти. Не буду утверждать, что дизайнером может стать любой, однако, доля правды в этом есть. Я не знаю ни одного заведения (высшего, среднего — любого) в этой стране, которое бы по-настоящему обучало профессии дизайнера. Частично это происходит потому, что очень сложно отстроить сам процесс обучения таких специалистов, другой проблемой является отсутствие понимания самой профессии и базы для воспитания таких специалистов.

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

В своем хабра-интервью Алексей Дружинин, известный дизайнер, как-то привел одну очень интересную и известную историю, которая четко иллюстрирует суть профессии дизайнера. Процитирую Алексея:
«В Лондоне некоторое время назад проводился конкурс среди дизайнеров на редизайн одной из улиц этого города. Приглашено было большое количество и дизайнеров, и художников, и просто около-творческих людей. Задача на первый взгляд простая — сделать редизайн одной из старейших улиц Лондона. После нескольких месяцев работы на суд было предоставлено несколько работ. Среди них было много граффити, много предложений во что можно раскрасить дома, дорогу и магазины с киосками — вообщем много очень интересных, но именно художественных проектов. Выиграла женщина, Дизайнер, которая вместо того чтобы заниматься украшательством улицы и домов, сначала прошлась по ней, поговорила с людьми, расспросила их о сути проблемы. Она вышла защищать свой проект не с кучей бордов и красивыми картинками, а рассказала комиссии, что на этой улице, в рамках выделенного бюджета, можно сделать единственную правильную с точки зрения дизайнера вещь — положить на дороге новый асфальт, потому как старый совсем уже плох. Вот это — я считаю работой профессионального зрелого Дизайнера с большой буквы. Она победила в конкурсе»

RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: ,

Голосуй или проиграешь

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


Так, 40% менеджеров, получивших форму, приведенную на рис. 1, не смогли понять в какую ячейку следует вносить оценки.

«Evaluation Form». Начальная версия
Рис. 1. «Evaluation Form». Начальная версия

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

Переделка формы заняла всего 5 минут: «Evaluation Form».Переработанная версия
Рис. 2. «Evaluation Form». Переработанная версия


RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: , , ,

Выпадающее меню Skype

Кажется, ну что можно улучшить в выпадающем меню — вроде бы все уже придумано? Ан-нет. Великолепную идею использования иконок в выпадающем меню показывает Skype:
Выпадающее меню Skype

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

Очень практично!
RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: , , ,

Оценка пользовательского интерфейса неспециалистами

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


Мой личный проектный опыт говорит о том, что и от неспециалистов можно получить заметный вклад в улучшение юзабилити продукта. Принцип здесь простой: как можно больше и чаще обсуждать разрабатываемый пользовательский интерфейс со всеми, кто как-то может быть связан с его разработкой или использованием. Чем больше людей оценило интерфейс, тем большего уровня юзабилити можно достичь. Количество переходит в качество.

Так чьей же помощью может воспользоваться проектировщик взаимодействия для оценки пользовательского интерфейса?

Самооценка Вроде бы самое очевидное, но требует определенной организованности и силы воли. Главное не лениться. Перед тем как показывать интерфейс (прототип, экраны, и т.д.) кому-либо другому следует ещё раз внимательно просмотреть все самому. Часто можно найти и исправить какие-либо мелкие недоработки.

Помощь коллег (Peer review) При возникновении каких-либо неясностей, вопросов по разрабатываемому интерфейсу –позвать коллег, попросить совета, в трех словах объяснить ситуацию, провести пяти минутных мозговой штурм и использовать полученное решение.

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

Специалисты в предметной области приложения Что-то среднее между бизнес аналитиками и потенциальными пользователями. В случае специфической и сложной предметной области могут быть ценными советчиками.

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

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

Графические дизайнеры Удовлетворенность пользователя ¬ третий компонент юзабилити. И эстетическая удовлетворенность – часть удовлетворенности пользователя. То, что хорошо выглядит кажется более легким в использовании. Привлекайте по возможности графического дизайнера в начале работы над проектом, а потому периодически пользуйтесь его советами.

Специалисты по проектированию взаимодействия, дизайну интерфейсов, юзабилити Те, кто может провести экспертную оценку. Для повышения качества оценки старайтесь задействовать как можно больше экспертов за итерацию. 3-5 было бы идеально. Качественный результат от оценки интерфейса пятью экспертами намного выше, чем от тестирования с пятью пользователями. Другие участники проектной команды, люди заинтересованные в проекте Их мнение также может быть ценным, ведь в нашем случае чем больше, тем лучше.

Потенциальные пользователи системы Система или отдельные сценарии ее использования, в случае большой системы, демонстрируется и подробно объясняется потенциальным пользователям. После происходит обсуждение увиденного. Оценка интерфейса потенциальными пользователями близка к таким юзабилити методам как: Contextual Interview, Focus Group, Active Participation Testing.

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


RSS-подписка
Читайте и комментируйте оригинальную статью на ui.by

Labels: , ,