Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,755 views

Published on

Отвечаем на вопрос: «Что такое информационная архитектура веб-проекта?», рассказываем о ее внедрении в агентстве и показываем примеры работ: сбор и анализ данных, матрица услуг, конкурентный анализ, структура проекта, пользовательские сценарии, система целей проекта, списки функций и контент-план.

Published in: Design
  • Dating for everyone is here: ♥♥♥ http://bit.ly/39mQKz3 ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/39mQKz3 ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. Опыт внедрения информационной архитектуры Юля Мархадаева Руководитель веб- отдела в Nimax
  2. 2. Ситуация Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015 ТЗ/Интервью Бриф/ТЗ Прототип Клиент Менеджер UX/UI дизайнер Ситуация
  3. 3. Интервьюирование Структура Модели данных SEO-требования Тексты Контент Акценты Последовательность информации Итерации Шаблонность Смысл Контентная стратегия Идеи Решения Сценарии Требования Консультирование Гипотезы Информационное проектирование Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015
  4. 4. Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015 Новый этап? Информация Собрать Упорядочить Сгенерить Описать Написать
  5. 5. Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015 Новый этап? Информационная архитектура Информационный архитектор Новый этап Новый участник
  6. 6. Интерактивное агентство Nimax, 2015 КнигаТребования к этапу в виде списка Клиент Первый инфарх Старт Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet nibh et feugiat mattis. Nunc quis nisl vel ligula fermentum interdum. Pellentesque metus diam, consequat luctus porttitor id, vul- putate dignissim eros. Donec tristique nulla sed commodo tincidunt. Proin sodales velit eu metus dapibus faucibus. Donec ut fermentum neque. Aenean condimentum magna magna, non pharetra massa condimentum et. Nulla finibus sagittis imperdiet. Aenean placerat, sem mattis commodo feugiat, est orci sodales nibh, vel efficitur elit lorem quis sapien. Integer congue metus et dolor faucibus tempus efficitur eu enim. Nam feugiat at orci sit amet placerat. Suspendisse ul- trices gravida leo, vel commodo leo ac- cumsan eget. Suspendisse tortor felis, interdum nec augue eu, venenatis sodales arcu. Sed vel libero eget nulla congue ullamcorper. Cras blandit lectus a fauci- bus scelerisque. Praesent viverra laoreet nunc at euismod. Nulla ac libero facili- sis dui egestas ullamcorper id et eros. Nulla non lacinia ligula. Morbi sed nisl sagittis, finibus nisi nec, tempus felis. Phasellus elementum justo eu dui sodales, eget dapibus mi feugiat. Integer cursus mauris nisi, eu imperdiet metus bibendum eget. Nunc sit amet accumsan est, ut suscipit arcu. Duis et magna in nunc cursus luctus. Donec commodo pretium lacus euismod sodales. Etiam porttitor vulputate lacus a ultricies. In nec libero sollici- tudin, maximus justo at, iaculis justo. Phasellus ultricies odio lorem, sit amet malesuada leo tempus quis. Duis eget iaculis tellus, eu rutrum eros. Aliquam tempor elementum ullamcorper. Ut venenatis rutrum lacus non fermentum. Nullam est lacus, tempus eget lectus eu, scelerisque porta ante. In vitae lobortis enim. Опыт внедрения информа- ционной архитектуры
  7. 7. Интерактивное агентство Nimax, 2015 КнигаТребования к этапу в виде списка Клиент Первый инфарх Ошибка! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet nibh et feugiat mattis. Nunc quis nisl vel ligula fermentum interdum. Pellentesque metus diam, consequat luctus porttitor id, vul- putate dignissim eros. Donec tristique nulla sed commodo tincidunt. Proin sodales velit eu metus dapibus faucibus. Donec ut fermentum neque. Aenean condimentum magna magna, non pharetra massa condimentum et. Nulla finibus sagittis imperdiet. Aenean placerat, sem mattis commodo feugiat, est orci sodales nibh, vel efficitur elit lorem quis sapien. Integer congue metus et dolor faucibus tempus efficitur eu enim. Nam feugiat at orci sit amet placerat. Suspendisse ul- trices gravida leo, vel commodo leo ac- cumsan eget. Suspendisse tortor felis, interdum nec augue eu, venenatis sodales arcu. Sed vel libero eget nulla congue ullamcorper. Cras blandit lectus a fauci- bus scelerisque. Praesent viverra laoreet nunc at euismod. Nulla ac libero facili- sis dui egestas ullamcorper id et eros. Nulla non lacinia ligula. Morbi sed nisl sagittis, finibus nisi nec, tempus felis. Phasellus elementum justo eu dui sodales, eget dapibus mi feugiat. Integer cursus mauris nisi, eu imperdiet metus bibendum eget. Nunc sit amet accumsan est, ut suscipit arcu. Duis et magna in nunc cursus luctus. Donec commodo pretium lacus euismod sodales. Etiam porttitor vulputate lacus a ultricies. In nec libero sollici- tudin, maximus justo at, iaculis justo. Phasellus ultricies odio lorem, sit amet malesuada leo tempus quis. Duis eget iaculis tellus, eu rutrum eros. Aliquam tempor elementum ullamcorper. Ut venenatis rutrum lacus non fermentum. Nullam est lacus, tempus eget lectus eu, scelerisque porta ante. In vitae lobortis enim. Опыт внедрения информа- ционной архитектуры
  8. 8. Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015 Ещё ошибки Копались слишком глубоко Растягивали сроки Много спрашивали и уточняли Много промежуточных презентаций Много документов, текстов, слов Ограниченный взгляд и решения Пугали клиентов неопределенностью Хотели делать идеально и «на всю жизнь»
  9. 9. Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015 Исправились Список этапов под проект Временные ограничения Никаких промежуточных результатов Поменьше текстов, слов Максимум визуализации Рекомендации по продвижению Работа с ожиданием Совместили этап с проектированием и дизайн-концептами Учитываем ограничения Описываем итерации Работаем с контентом
  10. 10. Идеальная Информационная Архитектура Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015 Выводы
  11. 11. Развитие Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015 3 года 4 инфарха 60 проектов
  12. 12. Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015 Information Architecture of website
  13. 13. Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015
  14. 14. Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015
  15. 15. Матрица услуг Интерактивное агентство
  16. 16. Пример аудита конкурентов Интерактивное агентство
  17. 17. Структура
  18. 18. Структура Интерактивное агентство
  19. 19. Структура
  20. 20. Сценарии Интернет-магазин E2E4
  21. 21. Сценарии Интернет-магазин E2E4
  22. 22. Сценарии Интернет-магазин E2E4
  23. 23. Сценарии Russian AI Cup
  24. 24. Сценарии Russian AI Cup
  25. 25. Цели посещения главной страницы Компания CRT Интерактивное агентство
  26. 26. Цели посещения главной страницы Компания «Стрела Времени»
  27. 27. Идеи. Решения. Рекомендации Списки вложенных категорий появляются по наведению. При наличии трёх уровней управлять панелью трудно. Меню оформлено также, как и выдача. Отсутствует акцент на главном навигационном элементе. При появлении списка третьего уровня, плашка примыкает к верхнему краю рядом стоящего элемента, а это затрудняет вос- приятие — меню третьего уровня можно ошибочно отне- сти к первому элементу списка, например, к пункту «Легковые автомобили» (Изображение 4).
  28. 28. Идеи. Решения. Рекомендации Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015
  29. 29. Контент- ный план Главная страница «Балтинвест» Страница /Элемент Вводный блок — Заголовок (до 100 знаков) — Графика, презентующая направле- ния лизинга + ссылки на страницы направлений — Заголовок (до 50 знаков) — Список из 3 преимуществ, каждое состоит из Подзаголовка (до 20 знаков) + Текста (до 150 знаков) — Ссылка «Подробнее о преимуществах работы с Балтинвест» — Список фактов о компании (до 70 знаков каждый) (+2 факта содержат фразу «По данным рейтингового агентства...») — Ссылка «Подробнее о компании Балтинвест» — Текст-призыв (до 100 знаков) — Кнопки + форма заказа обратного звонка, форма отправки заявки — Изображение со ссылкой на страницу калькулятора — Комментарий (до 100 знаков) — Изображение со ссылкой — Комментарий (до 100 знаков) 6 направлений лизинга: — Легковой транспорт — Грузовой и коммерческий транспорт — Спецтехника — Оборудование — Железнодорожный транспорт — Недвижимость Блок состоит из 6 пунктов: 1) 17 лет работы 2) 3-е место среди лизинговых компаний в Северо-Западном регионе 3) Входит в список 25 крупнейших лизинговых компаний России 4) Компания работает в 10 регионах России 5) Заключила более 25 000 контрактов на сумму более 50 000 млн. руб 6) Более 4 000 клиентов Задача: продемонстрировать 3 главных преимущества работы с компанией — быстро, выгодно, удобно Элемент должен побудить пользователя совершить звонок или оставить заявку: «Хотите узнать больше об услугах компании?» Пожелание заказчика — создать элемент, походящий на http://samo.ru/ Формулировки преимуществ можно изменить К пункту 2) и 3) дать ссылку: «По данным рейтингового агентства „Эксперт“ за 2012 год» Пожелания заказчика: оба элемента должны быть заметны пользователю сразу при открытии страницы Задача: представить компанию, профиль ее деятельности— Лид (до 300 знаков) Направления лизинга Почему Балтинвест? Презентационный блок Кнопки «Обратный звонок» и «Заявка» Калькулятор-конфигуратор Вход в личный кабинет Вид контента и требования к формату Ключевые сообщения Особенности и рекомендации
  30. 30. Тексты
  31. 31. Содержание. Функцио- нальность
  32. 32. Сбор информации Структура Сценарии Идеи. Решения. Рекомендации Контентный план Тексты Содержание. Функциональность Информационная архитектура Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015 Для контентных проектов
  33. 33. Сбор информации Структура Сценарии Идеи. Решения. Рекомендации Контентный план Тексты Содержание. Функциональность Модель данных Информационная архитектура Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015 Для интернет- магазинов
  34. 34. Сбор информации Структура Сценарии Идеи. Решения. Рекомендации Контентный план Тексты Содержание. Функциональность Модель данных Информационная архитектура Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015 Для веб-сервисов
  35. 35. Сбор информации Структура Сценарии Идеи. Решения. Рекомендации Контентный план Тексты Содержание. Функциональность Модель данных Информационная архитектура Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015 Для лендингов
  36. 36. Сбор информации Структура Сценарии Идеи. Решения. Рекомендации Контентный план Тексты Содержание. Функциональность Модель данных Информационная архитектура Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015 Для промо-сайтов
  37. 37. Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015 Information Architect
  38. 38. Интерактивное агентство Опыт внедрения информа- ционной архитектуры Стратег Аналитик Копирайтер Проектировщик Nimax, 2015 Дикая смесь
  39. 39. Зарывается в информацию Сомневается Не может принять решения Пишет плохие тексты Сопротивляется проектированию Не может предложить несколько решений Пессимистичен Ограничен в знаниях Идеалистичен Проектирует Пишет хорошие тексты Оформляет тексты Разбирается в бизнесе Слушает и слышит Хорошо рассказывает Может поспорить и убедить Формулирует идеи и мысли Копается и ищет правду Задает правильные вопросы Додумывает за клиента Предугадывает проблемы Разбирается в рекламных инструментах Разбирается в дизайне Разбиратется в технологиях P. S. Адекватный, харизматичный, симпатичный P. S. Не хочет ничему учиться, дикий интроверт и зануда. Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015 Качества Хорошо, если инфарх может... Плохой инфарх..
  40. 40. Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015 Развитие Инфарх Проектирование Стратегия
  41. 41. Интерактивное агентство Опыт внедрения информа- ционной архитектуры Nimax, 2015 Вопросы.
  42. 42. Интерактивное агентство www.nimax.ru

×