Или почему так важно знать правило 7 плюс минус 2

Калимуллин К.Г. AdVantShop.NET

С чего начинается дизайн?С чего начинается дизайн?

Удобный дизайн начинается с Удобный дизайн начинается с прототипапрототипа

Инструменты Инструменты прототипирования/дизайна.прототипирования/дизайна.http://axure.com/

Microsoft EXPRESSION BLEND 3 + SKETCHFLOW

https://www.mybalsamiq.com/

Пробуйте, ищите….

О чем говорим?.О чем говорим?.

Вечный спор!Вечный спор!

Простота = легкость для восприятия

Одна простая идея эффективнее

Это обязательно должно быть на главной.

Выжать по максимуму.

Тезис - аксиомаТезис - аксиома

Чем удобнее сервис/приложение/сайт, тем выше его ценность

Что обычно не так?Что обычно не так?

Цветовая гамма (выбранные цвета для элементов)

Цветовая гамма (выбранные цвета для элементов)

Композиция (расположение блоков и элементов)

Композиция (расположение блоков и элементов)

А мозги у нас разные? Или нет?

1.1.

2.2.

3.3.

4.4.

Пример главной(разбор)Пример главной(разбор)

Shopify.comShopify.com

Пример главнойПример главной

Пример главнойПример главной

Советы по основную Советы по основную интерфейсуинтерфейсуИспользуйте правило 7+-2

Ограничивайте палитру, используйте работающие палитры сочетания

Простота лучше!(вспомните про логотип Microsoft и Adobe). Всё идёт к простоте.

Всё гениальное – просто, но не всё простое – гениально. (с) Энштейн.

Что самое главное?

Что самое главное?

Как сделать еще проще?Как сделать еще проще?

Ищем гормонию

Ищем гормонию

1. Какую их двух страниц Вам 1. Какую их двух страниц Вам комфортней читать?комфортней читать?

63%37%

2. Какой их этих двух текстов 2. Какой их этих двух текстов легче читать?легче читать?

54%46%

3. Какой из вариантов меню 3. Какой из вариантов меню Вы предпочитаете?Вы предпочитаете?

22%78%

4. Какое вид навигации 4. Какое вид навигации Вы предпочитаете?Вы предпочитаете?

29%71%

5. На каком экране проще 5. На каком экране проще найти строку поиска?найти строку поиска?

77%23%

6. Где Вы ожидаете увидеть 6. Где Вы ожидаете увидеть кнопку «кнопку «SubmitSubmit»?»?

50%50%

7. Какой дизайн вызывает 7. Какой дизайн вызывает больше довериябольше доверия к компании?к компании?

27%73%

8. Какое выделение 8. Какое выделение обязательных полей обязательных полей предпочтительнее?предпочтительнее?

50%50%

9. Какой из вариантов удобнее 9. Какой из вариантов удобнее закрыть?закрыть?

95%5%

10. Какой вариант кнопки 10. Какой вариант кнопки «Печать» Вы предпочитаете?«Печать» Вы предпочитаете?

78%22%

МетодологииМетодологии

1. Эвристика Нильсена

2. Оценка по чек-листам

3. Сценарная оценка4. Обратная

карточная сортировка

5. Тесты ожиданий6. Оценка восприятия

Выбирайте своё

Выбирайте своё

Дизайн-мышлениеДизайн-

мышление

Быстрые оценкиБыстрые оценки

Проверку гипотез Получение обратной

связи Видение основных

проблем Возможность проверки

до создания продукта Выявление приоритетов

для исправлений Выявление

расхождений Понимание

направлений движения

Не дают

Однозначного способа исправления ошибки

Статистически корректного результата

Понимания поведения пользователя, его контекста и ограничений

ДАЮТ

1. Эвристика Нильсена1. Эвристика Нильсена1. Наглядность текущего

состояния системы

2. Связь с реальным миром

3. Управляемость и свобода действий

4. Согласованность и стандарты

5. Предотвращение ошибок

6. Узнавание против запоминания

7. Гибкость и эффективность использования

8. Эстетика и лаконичность дизайна

9. Предвидение ошибок и восстановление после них

10. Справочная система и документация

2. Чек -лист2. Чек -лист

На основании экспертного мнения составляется контрольный список проверки Утверждения, которые

можно проверить на сайте

В основе чеклиста Стандарты

платформы Паттерны поведения Сложившиеся

привычки Регламенты ...

Где брать?Где брать?

Стандарты платформы Брендбук Существующие привычки Best practices Существующие чеклисты

Пример чек-листаПример чек-листаРазмер страницы превышает размер

окна? Схема планировка повторяется на всех

страницах? Существует ли отчетливый фокус на

каждой странице? Планировка визуально видна? Эффективно ли используется

выравнивание? Эффективно ли используется

группировка? Есть ли хороший контраст? Не громоздкая ли планировка? Нравится ли сайт эстетически?

3. Сценарная оценка 3. Сценарная оценка

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

Учитываем демографию и Учитываем демографию и контекст контекст

Поместим задачу в контекст и добавим демографии – получим сценарии

Оценка «ключевого пути»Оценка «ключевого пути»Выбирается «ключевой путь»

ТранзакцияНаиболее частотная последовательность

перемещенийНаиболее частотный сценарий

Строится диаграмма переходовНа каждом переходе фиксируются

Барьеры (что препятствует выполнению сценария)

Мотиваторы (что нейтрализует барьеры)На основании соотношения барьеров и мотиваторов

можно сделать вывод оСуществующих проблемахПриоритетах решения для этих проблем

4. Обратная карточная 4. Обратная карточная сортировка сортировка

Проверка структура навигации.

Несколько видов: Тестирование

дерева Списком

(текстовый) Карточками

(графический) Тестирование

экранов

Процедура обратной Процедура обратной карточной сортировкикарточной сортировки Показать страницу/экран

Для удаленной оценки нужно пронумеровать интерактивные объекты, чтобы пользователь выбирал «правильный» номер.

Задать вопросы о том, где находится информация: «Вам нужно узнать погоду на завтра.

Где вы будете её искать?» «В каком разделе находятся

неподписанные документы?»

Пример обратной карточной Пример обратной карточной сортировкисортировки

Задания пользователямЗадания пользователям

Где найти информацию о том, что "Дмитрий Медведев приостановил действие отдельных положений закона «О страховании вкладов физических лиц в банках Российской Федерации»"?

В сентябре Дмитрий Медведев посетил казахстан. В каком разделе можно найти информацию об этом событии?

Не так давно Дмитрий Медведев в Питтсбурге сделал заявление относительно ситуации вокруг Ирана. В каком разделе сайта можно найти информацию об этом заявлении?

3 -документы

5 - визиты

2 - выступления и стенограммы

4. Тестирование ожиданий4. Тестирование ожиданий

Провести тест с пользователями

Задавать им вопросы об ожидаемом поведении того или иного элемента«Что вы ожидаете

увидеть, когда нажмете на него?»

«Что произойдет после нажатия на эту кнопку?»

Сравнить ожидания пользователей с тем, что планировалось реализовать, или уже реализовано.

5. Оценка восприятия 5. Оценка восприятия дизайнадизайна

Используется для оценки нескольких вариантов дизайна;

Нужно выбрать тот, который лучше других будет вызывать у пользователей нужные, «целевые» эмоций.

ПроцедураПроцедура

Задать список прилагательных, с которыми должен ассоциироваться дизайн и их антонимов

Нарисовать несколько макетов Распечатать макеты в цвете На основании прилагательных и их

антонимов сформировать шкалы Провести тест с пользователями

(~10), которые по шкалам оценивает дизайн

Обработать результат

ОбработкаОбработка

Посчитать средние (или суммы) по каждой паре прилагательный.

Построить диаграмму-профиль для каждого варианта дизайна.

Выбрать вариант дизайна, лучше соответствующий целевым эмоциям.

Как выглядят результатыКак выглядят результаты

6. Соответствие стандартам 6. Соответствие стандартам платформплатформ Описания

Взаимодействия Геометрических

характеристик элементов Стилистики Графического дизайна Подхода к компоновке

Платформа Настольная Мобильная Touch-киоски

Производитель Microsoft Apple Nokia Сообщества (Gnome, KDE)

Порядок оценкиПорядок оценки

Эксперт по интерфейсам данной платформы : Изучает экраны Отмечает

несоответствие компоновки, размеров и использования элементов интерфейса стандартам

По окончании оценки в экраны вносятся изменения.

Может быть встроено в software testing.

WEB-WEB-стандартыстандарты

Разработаны департаментом Health and Human (USA)

Содержат полный спектр гайдлайнов Процессных Accessibility Компоновки Использования тех

или иных элементов Взаимодействия

Ограничение: В части использования

RIA

Создавайте ценность!Создавайте ценность!

Удобство – это ценность. Спасибо!

Камиль Калимуллин@buxler

kamil@itmcompany.ru