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

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

    Конспект приправлен моими мыслями, выкладывать буду по уровням, всего их 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 проблемы:
    — Внешняя — иной подход дизайна по сравнения с другими продуктами и коммуникациями компании.
    — Внутренняя — разные подходы к дизайну в разных частях сайта.

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

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


    — Использовать разные шрифты для привлечения внимания
    — Не перегружать черезменым колличеством шрифтов
    — В шрифте не должно быть шумов
    • +11
    • 4,5k
    • 1
    Поделиться публикацией

    Комментарии 1

      +1
      Классная книжка.

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

      Самое читаемое