Начинаю выкладывать конспект книги «Элементы опыта взаимодействия», которая обязательна для прочтения всем кто занимается проектированием веб систем с которыми взаимодействуют пользователи.
Конспект приправлен моими мыслями, выкладывать буду по уровням, всего их 5:
1.Уровень стратегии
2.Уровень набора возможностей
3.Уровень структуры
4.Уровень компоновки
5.Уровень поверхности
Сеть интернет сейчас представляет собой одновременно и пространство с контентом и программное обеспечение. Именно поэтому в проектировании опыта взаимодействия необходимо учитывать комплексный подход.
5 элементов взаимодействия позволяют проектировать опыт на уровнях от абстрактного к конкретному.
Уровень стратегии
На этом уровне нам необходимо понять что нужно нам от проекта, и в чем нуждаются будущие пользователи.
Определение целей сайта
— должны отражать суть бизнес процессов компании
-не слишком абстрактные чтобы мы смогли понять какие решения принимать — сайт должен быть красивым, это очень абстрактно.
-не слишком конкретные, чтобы мы смогли оценить эффект — кнопки на сайте должны быть черного цвета. очень конкретно.
— лучше всего формировать цели по принципам SMART
Определение потребности пользователей
Изначально необходимо сегментировать потенциальных пользователей:
— с помощью исследований — демографических и психографических
— с помощью методики персонажей — я использую эту методику, подвергая ее анализу владельца сайта, а так же по возможности представителей потенциальной аудитории
Следующим шагом необходимо определить потребность пользователей и разбить ее по группам.
Например:
А1 Найти информацию о занятиях
А2 Зарегистрироваться на заняти
В3 Найти информацию о возможности вести занятия
В4 Зарегистрироваться как преподаватель
Сбор информации
Важная часть сбора информации на данном этапе проектирования, общение с сотрудниками компании заказчика сайта. На этом этапе обсуждается каждая потребность, и ее источник. И уж тем более каждая цель компании. цели утвержадет главный человек компании, с полным пониманием что это важно.
Уровень набора возможностей
На этом уровне нам необходимо понять нам нужно делать, и немаловажно что не нужно делать.
Все функциональные спецификации и требования к контенту образуются на стыке потребносей пользователя и целей компании, и находятся в гармонии между ними
Как ранжировать возможности
— Цель и потребность определяют несколько возможностей
— Возможность служит нескольким целям потребностям
Как описывать функциональные спецификации
— Описать зачем
— Привести пример, лучше ссылкой на похожий элемент
— Описать сценарий:
— Пользователь нажимает кнопку
— Система уничтожает мир
— Пользователь погибает
— Будьте позитивны:
— нет — система не позваляет пользователю сделать действия 1 без действия 0
— да — система после того как пользователь сделал дейтсвеи 1 перенаправляет его на действие 0
— Будьте объективны
— нет — сайт должен быть производительным
— да — сайто должен выдерживать нагрузку в 1000 посещений за 1 минуту
— Используйте концептуальные модели — решения часто применяемые разработчиками, к котрым пользователь уже привык
— Используйте ментальные модели — решения аналогичные решениям которые применяются в реальной жизни(корзина)
Как определять требования к контенту
— Формат — текст, звук, видео, фото
— Назначение — ответить на вопросы, убедить
— Кто отвечает за создание
— Как часто обновлять
Уровень структуры
На этом уровне нам необходимо из полученных решений получить целлостную картину того, гже эти все решения будут применятся.
Информационная архитектура
— Нисходящий подход разработки архитектуры- разбиваем весь контент и функциональные решения по категориям на основе целей сайта и потребностей пользователя:
Выбрать товар
Заказать товар
Доставить товар
Минусы данного подхода — можно упустить детали
— Восходящий подход разработки архитектуры- — на основе контента и фунциональных решений определяем категории:
Каталог товаров
Каталог услуг
Адреса магазинов
Минусы данного подхода — не гибок для нового контента и решений
Правда как всегда находится между 2 подходами, то есть категории вернего уровня определяем нисходящим подходом, а категории болие низкого восходящим.
Возможные архитектурные решения
1. Иерархическая система
Узел родитель есть у каждого кроме самого верхнего уровня.
2. Матричная
Позволяет строить навигацию по одному контенту разным пользователям(фильтры).
3. Органическая
Произвольным образом соединяет узлы, подходят для контента связи в котором не ясны.
4. Последовательная структура
Узлы друг за другом, для статей и отдельных разделов.
Язык и методанные
Создавать словарь нормативной лексики, где есть все употребляемые на сайте термины понятны и пользователям и разработчикам. Чтобы избежать производственного
Уровень компоновки
На этом уровне мы концентрируемся на отдельных страницах и функциональных блоках.
— Если пользователь совершает действе — дизайн интерфейса.
— Если пользователь перемещается — дизайн навигации.
— Если пользователь совершает действие — информационный дизайн.
Дизайн интерфейса
Удачный интерфейс это тот в котором важная информация видна сразу, а не важная вторична.
Дизайн интерфейса сводится к выбору подходящих элментов с учетом задач стоящих пред пользователем, и размещением их таким образом, чтобы было легко как и зачем им пользоваться.
Элементы дизайна интерфейса:
Флажки
Кнопки
Текстовые поля
Выпадающие списки
Раскрывающиеся списки
Радиобатонны — позволяют сделать выбор зависимо друг от друга
Дизайн навигации
3 основных функции навигации:
1. Позволяют пользователю перемещатся из одной точки сайта в другую
2. Отражает взаимоотношение между страницами(иерархия)
3. Отражает взаимоотношение между навигацией и содержанием страницы
!Самый важный вопрос пользователя — где я, и куда могу попасть.
Типы навигаций
Глобальная навигация
Позволяет перейти с одного конца сайта на другой, В любое место сайта, на любой уровень
Локальная навигация
Предоставляет доступ к родительской странице, страницам потомкам и страницам соседям
Дополнительная навигация
Дает доступ к связанному со страницей контенту.
Контекстная навигация
Встроена в контент, позволяет переместиться в раздел исходя из необходимостей изучания конетнта.
Сервисная навигация
Разделы с информацией которая всегда может пригодится(контакты, заказ звонка)
Выносная навигация
— карта сайта — наверное все знают что это)
— индекс — все ссылки по алфавиту
Информациооный дизайн
Это о том как представить информацию таким образом, чтобы людям было легче воспринять и использовать ее.
Для описания информационного дизайна применяются Прототипы страницы которые ссылаюстся на:
— Требования к контенту
— Схемы взаимодействия
— Технические спецификации
Уровень поверхности
На этом уровне мы:
— отражаем стиль визуальных коммуникаций бренда
— привлекаем внимение на важные элементы — важно чтобы одни элементы привлекали больше внимание а другие меньше, иначе либо ничего не будет привлекать внимание, либо слишком тяжело будет на чем то сосредоточится
Один элемент можно выделить за счет:
— Контраста
— Единообразия элементов
Возможные проблемы дизайна в компании
2 проблемы:
— Внешняя — иной подход дизайна по сравнения с другими продуктами и коммуникациями компании.
— Внутренняя — разные подходы к дизайну в разных частях сайта.
Решения:
Использовать на сайте и в других коммуникациях идентику которая вызывет одинаковый эффект
Разрабатывать элементы вне контекста страницы, чтобы была возможность использовать многократно.
Все решения по дизайну находятся в руководстве по фирменному стилю — чтобы на тактическом уровне не уйти от последовательности, а так же при уходе сотрудников
Использование шрифтов
— Использовать разные шрифты для привлечения внимания
— Не перегружать черезменым колличеством шрифтов
— В шрифте не должно быть шумов
Автор: whoyuppie1