Элементы опыта взаимодействия — мой краткий пересказ книги

в 14:46, , рубрики: интерфейсы

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

Конспект приправлен моими мыслями, выкладывать буду по уровням, всего их 5:
1.Уровень стратегии
2.Уровень набора возможностей
3.Уровень структуры
4.Уровень компоновки
5.Уровень поверхности


image

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

5 элементов взаимодействия позволяют проектировать опыт на уровнях от абстрактного к конкретному.

Уровень стратегии

image

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

Определение целей сайта

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

Определение потребности пользователей

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

Следующим шагом необходимо определить потребность пользователей и разбить ее по группам.
Например:
А1 Найти информацию о занятиях
А2 Зарегистрироваться на заняти
В3 Найти информацию о возможности вести занятия
В4 Зарегистрироваться как преподаватель

Сбор информации

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

Уровень набора возможностей

image

На этом уровне нам необходимо понять нам нужно делать, и немаловажно что не нужно делать.

image

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

Как ранжировать возможности

— Цель и потребность определяют несколько возможностей
— Возможность служит нескольким целям потребностям

Как описывать функциональные спецификации

— Описать зачем
— Привести пример, лучше ссылкой на похожий элемент
— Описать сценарий:
— Пользователь нажимает кнопку
— Система уничтожает мир
— Пользователь погибает
— Будьте позитивны:
— нет — система не позваляет пользователю сделать действия 1 без действия 0
— да — система после того как пользователь сделал дейтсвеи 1 перенаправляет его на действие 0
— Будьте объективны
— нет — сайт должен быть производительным
— да — сайто должен выдерживать нагрузку в 1000 посещений за 1 минуту
— Используйте концептуальные модели — решения часто применяемые разработчиками, к котрым пользователь уже привык
— Используйте ментальные модели — решения аналогичные решениям которые применяются в реальной жизни(корзина)

Как определять требования к контенту

— Формат — текст, звук, видео, фото
— Назначение — ответить на вопросы, убедить
— Кто отвечает за создание
— Как часто обновлять

Уровень структуры

image

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

Информационная архитектура

— Нисходящий подход разработки архитектуры- разбиваем весь контент и функциональные решения по категориям на основе целей сайта и потребностей пользователя:
Выбрать товар
Заказать товар
Доставить товар
Минусы данного подхода — можно упустить детали

— Восходящий подход разработки архитектуры- — на основе контента и фунциональных решений определяем категории:
Каталог товаров
Каталог услуг
Адреса магазинов
Минусы данного подхода — не гибок для нового контента и решений

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

Возможные архитектурные решения

1. Иерархическая система
Узел родитель есть у каждого кроме самого верхнего уровня.
image

2. Матричная
Позволяет строить навигацию по одному контенту разным пользователям(фильтры).
image

3. Органическая
Произвольным образом соединяет узлы, подходят для контента связи в котором не ясны.
image

4. Последовательная структура
Узлы друг за другом, для статей и отдельных разделов.
image

Язык и методанные

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

Уровень компоновки

image

На этом уровне мы концентрируемся на отдельных страницах и функциональных блоках.

— Если пользователь совершает действе — дизайн интерфейса.
— Если пользователь перемещается — дизайн навигации.
— Если пользователь совершает действие — информационный дизайн.

Дизайн интерфейса

Удачный интерфейс это тот в котором важная информация видна сразу, а не важная вторична.

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

Элементы дизайна интерфейса:
Флажки
image

Кнопки
image

Текстовые поля
image

Выпадающие списки
image

Раскрывающиеся списки
image

Радиобатонны — позволяют сделать выбор зависимо друг от друга
image

Дизайн навигации

3 основных функции навигации:
1. Позволяют пользователю перемещатся из одной точки сайта в другую
2. Отражает взаимоотношение между страницами(иерархия)
3. Отражает взаимоотношение между навигацией и содержанием страницы

!Самый важный вопрос пользователя — где я, и куда могу попасть.

Типы навигаций

Глобальная навигация
Позволяет перейти с одного конца сайта на другой, В любое место сайта, на любой уровень
image

Локальная навигация
Предоставляет доступ к родительской странице, страницам потомкам и страницам соседям
image

Дополнительная навигация
Дает доступ к связанному со страницей контенту.
image

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

Сервисная навигация
Разделы с информацией которая всегда может пригодится(контакты, заказ звонка)
image

Выносная навигация
— карта сайта — наверное все знают что это)
— индекс — все ссылки по алфавиту

Информациооный дизайн

Это о том как представить информацию таким образом, чтобы людям было легче воспринять и использовать ее.

Для описания информационного дизайна применяются Прототипы страницы которые ссылаюстся на:
— Требования к контенту
— Схемы взаимодействия
— Технические спецификации

Уровень поверхности

image

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

Один элемент можно выделить за счет:
— Контраста
— Единообразия элементов

Возможные проблемы дизайна в компании

2 проблемы:
— Внешняя — иной подход дизайна по сравнения с другими продуктами и коммуникациями компании.
— Внутренняя — разные подходы к дизайну в разных частях сайта.

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

Использование шрифтов

— Использовать разные шрифты для привлечения внимания
— Не перегружать черезменым колличеством шрифтов
— В шрифте не должно быть шумов

Автор: whoyuppie1

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js