Артефакты: макеты UI (wireframes)

Описание

Макет интерфейса (англ. wireframe, русск. некрасивое вайер, каркас) – это статическая схематическая иллюстрация страницы (формы), на которой отображено расположение и содержание отдельных элементов интерфейса пользователя (UI). Задача макета – показать содержание конкретной страницы, взаимное расположение блоков и отдельных элементов. В абсолютном большинстве случаев макеты интерфейса не раскрывают особенностей визуального дизайна (используются черный/белый цвет и их оттенки, стандартные шрифты, простейшие иконки).

Ближайшими родственниками макетов являются эскизы или наброски (sketches, скетчи), прототипы, дизайн-макеты (mockups). Соотношение между всеми этими артефактами я постаралась показать на картинке:

Итак, в зависимости от детализации артефакта, можно выделить 3 варианта: скетч, собственно макет (wireframe) и дизайн-макет (mockup). Каждый из этих вариантов можно сделать динамическим, превратив его в прототип интерфейса.

Вперед «Артефакты: макеты UI (wireframes)»

Axure RP 7.0: первые впечатления

Наконец-то вышла новая версия Axure RP (хоть пока и бета). К радости всех, кто работал с Axure раньше, в новой версии есть целая пачка супер полезных исправлений. Сегодня я с ней познакомилась и хочу поделиться тем, что мне показалось наиболее интересным.

1) Первая супер полезняшка: в widget properties вынесены стили элементов

Помните, насколько неудобно было добираться в предыдущих версиях Axure до изменения таких вещей, как стиль элемента при наведении курсора, при клике на него; до текста всплывающей подсказки в конце концов? А кое-что из этого и в принципе можно было делать только у Rectangle/Button Shape, причем запрятано сие в контекстное меню, о котором знают далеко не все.

Так вот. Теперь блок для изменения всех этих свойств вынесен отдельно (ура) и доступен для всех элементов (ура-ура):

Вперед «Axure RP 7.0: первые впечатления»

Артефакты: отчет по юзабилити-аудиту

Описание

Юзабилити-аудит (usability review) – это процесс и результат экспертной оценки информационной системы (веб-сайт, веб-приложение, мобильное, настольное приложение и т.п.) либо ее прототипа на предмет удобства использования.

В процессе оценки могут быть использованы самые разные техники, но самая популярная – оценка по эвристикам (де-факто в большинстве случаев – по эвристикам Якоба Нильсена). В этом случае вместо «аудит» говорят «эвристическая оценка» (heuristic evaluation).

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

К более сложным и полезным техникам можно отнести экспертизу компонентов (feature inspection). В этом случае эксперту на вход дается описание пользователей (желательно – в формате персонажей), описание контекста использования, а также список основных пользовательских сценариев. Затем эксперт проходит последовательно по всем сценариям и отвечает на следующие вопросы:

  1. Как ускорить работу данных пользователей в данном контексте?
  2. Как снизить число ошибок данных пользователей в данном контексте?
  3. Как повысить удовлетворенность данных пользователей в данном контексте?
  4. Как сделать интерфейс понятнее данным пользователям, чтобы повысить скорость обучения в данном контексте?

Главное преимущество этого метода – учет особенностей пользователей и контекста в процессе оценки.

Разумеется, это не все существующие техники, но как показывает мой опыт, чаще всего используются именно они.

Примеры

Вместо примера привожу шаблон отчета, который используем мы. Вперед «Артефакты: отчет по юзабилити-аудиту»

Артефакты: референсные подборки и мудборды

Описание

Референсная подборка (design reference) создается в начале работы над визуальным дизайном и представляет собой компиляцию изображений, на которые затем дизайнер будет опираться при создании дизайн-макета. В нее могут входить примеры цветовых схем, шрифтов, оформления отдельных блоков, фотографий в интерфейсе, компоновки и отдельных графических элементов.

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

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

Понятия иногда используют взаимозаменяемо.

Примеры:

Вперед «Артефакты: референсные подборки и мудборды»

Как стать UX специалистом: часть 2

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

Совет 1: не все скучное бесполезно

Практически у всех, кто учится в ВУЗ-е, присутствует ряд предметов, чья полезность вызывает сомнение. Во время обучения зачастую трудно понять, что из полученных знаний является информационным мусором, а что потом ой как пригодится. Мой список таких предметов (я не считаю их скучными, но регулярно встречаю такое отношение):

1) Психология. Вся Ю область прочно стоит ни на чем ином, как на психологии. Все хорошие практики, рекомендации, правила и законы, в конце концов, можно свести к ней же.

Вперед «Как стать UX специалистом: часть 2»

Как стать UX специалистом: часть 1

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

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

Итак, небольшой ликбез на тему  «Что на самом деле делают эти люди (часть 1), и как мне стать одним из них (часть 2)».

Прежде всего, все активности, которые выполняют специалисты в юзабилити/user experience (для краткости далее – Ю специалисты), можно фактически свести к трем областям: анализ и исследование пользователей, проектирование (интерфейса, взаимодействия и иже с ними) и оценка. Далее я расскажу о каждой из областей подробнее, с той оговоркой, что перечень конкретных задач, с которыми приходится сталкиваться Ю специалисту, может меняться в зависимости от компаний и проектов. Далее о том, из каких профессий проще всего переквалифицироваться в Ю специалиста, а также перечень типичных артефактов, создаваемых в рамках каждой из областей. Подробное описание каждого артефакта выходит за рамки одного поста, однако обещаю рассказать про каждый из них подробнее в обозримом будущем.

Вперед «Как стать UX специалистом: часть 1»

Юзабилити-специалисты в хорошие компании

Внимание-внимание! Отдадим в хорошие руки юзабилити-специалистов. К Axure приучены, мирно уживаются с пользователями и заказчиками. Играют со шрифтам, цветами, элементами управления — в общем, знают, как себя занять. Выращены с любовью и заботой на курсах по юзабилити/User Experience.
Увидеть своими глазами можно 30 ноября на защите индивидуальных проектов на курсах. За приглашениями стучаться в личку.

О юзабилити, собаках Павлова и родительской гордости

Однажды маленького Ваню Павлова укусила собака. Собака укусила и забыла, а Ваня вырос и не забыл.

Корпоративное обучение очень сильно отличается от публичных курсов. Когда я читаю тренинги в компании, все — знакомство с группой, «настройка» на общую волну, узнавание проектов и местной специфики — как будто свернуто в 24 часа. Бывает больше, бывает меньше. Но «кульминация» наступает намного быстрее, чем, например, на курсах, где у нас есть 60 часов только аудиторных занятий и еще черт знает сколько — не аудиторных, чтобы узнать друг друга. Потому на тренингах в компании у меня обычно быстро достигается эмоциональный подъем, но мало с кем из слушателей мы потом поддерживаем постоянную связь. С курсами же, «после всего, что между нами было», не поддерживать связь просто не получится.

Но есть и исключения.

Вперед «О юзабилити, собаках Павлова и родительской гордости»

Axure 6.5: Life Hacks

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

1. Разрезаем картинку

Наверняка вы сталкивались с ситуациями, когда, вставив в Axure картинку, вы обнаруживали, что ее не мешало бы обрезать. Долгий путь – обрезать себе спокойно картинку в какой-нибудь другой программе и вставить снова в Axure уже тот самый, подходящий вариант. Но есть и быстрый путь:

В контекстом меню картинки нужно выбрать Edit Image -> Slice Image:

Вы увидите 2 линии, используя которые можно покромсать картинку на 4 части:

Вот собственно и результат:

Части можно использовать по-отдельности, а можно просто удалить лишние. Кстати, можно разрезать картинку только по горизонтали или только по вертикали.

Вперед «Axure 6.5: Life Hacks»