«Взаимодействие бизнес-аналитика, проектировщика интерфейсов и дизайнера при формировании требований по продукту»

1. Взаимодействие бизнес-аналитика,
проектировщика интерфейсов и дизайнера.
Что обязательно необходимо учесть
Гулик Людмила

2.  в ИТ с 1999 года
 прошла путь от программиста до руководителя
отдела бизнес-аналитиков
 на позиции бизнес-аналитика с 2006 года
 большой опыт успешного внедрения как
небольших доработок по изменению
существующих систем, так и больших
технически сложных проектов “с нуля”
 большой опыт анализа различных бизнес-
процессов в IT-компаниях и их успешной
оптимизации
 опыт организации с нуля отделов:
 сопровождения ПО
 тестирования ПО
 разработки требований к ПО
Мой опыт

3. Общая схема взаимодействий на проекте

4. О дизайне часто говорят, оценивая его качество, что он плохой или
хороший. Но понятия «хорошего» или «плохого» настолько субъективны для
каждого из пользователей, что абсолютно точно определить ту границу,
которая отделяет хороший дизайн сайта от плохого, очень сложно. Что же
такое хороший и плохой дизайн сайта с объективной точки зрения?
О том, насколько дизайн хороший, принято судить по нескольким
критериям. Наиболее популярные такие критерии:
 Технологичность дизайна
 Функциональность дизайна
 Оригинальность дизайна
 Целесообразность дизайна
Критерии оценки дизайна
с точки зрения конечных пользователей

5. Это уже хороший дизайн?

6. Критерии хорошего дизайна:
 Наличие адаптированных под все выбранные заказчиком устройства
дизайнов
 Наличие в каждом файле дизайна сетки и корректное позиционирование
элементов по ней
 Наличие шрифтов, использованных в дизайне
 Интуитивно понятная структура групп и слоев
 Отсутствие кучи лишних слоев, оставшихся от предыдущих идей дизайна
 Все скрытые, но важные элементы (всплывающие формы, меню и т.п.)
вынесены вверх и выделены цветом
 Единый UI Kit для дизайна (19 оттенков серого и разного размера кнопки и
заголовки одного уровня – плохой вариант)
 Все размеры должны быть указаны целым числом, а не 14,73 (это относится
и к размерам различных блоков, отступов, и к размеру кегля шрифта)
 Все активные элементы интерфейса удобны вне зависимости от устройства и
в дизайне имеется информация об их дизайне для различных состояний
Критерии оценки дизайна
с точки зрения разработчиков

7. Адаптивность. Примеры:
Инструмент проверки оптимизации для мобильных от Google:

8. Адаптивность. Примеры:

9. Типы реализации адаптивности:
1. Отдельный сайт для мобильных устройств (.m), когда мобильная версия
сайта имеет свой отдельный URL.
m.toyota.com

10. 2. Отзывчивый дизайн (Responsive Web Design, RWD), который использует
единую верстку страницы, плавающие размеры, плавающие сетки и CSS-
правила
3. Адаптивный дизайн (Adaptive Web Design, AWD with dynamic serving), когда
сервер возвращает один из множества вариантов страницы, основываясь на
типе устройства, который был указан в запросе на сервер
Типы реализации адаптивности:

11.  Отдельный сайт для мобильной версии оправдывает себя, когда для
мобильных устройств используется существенно урезанная
функциональность, бюджет на первоначальную разработку ограничен, но в
будущем будет достаточно средств на последующие поддержку и доработку
еще одного сайта.
 Responsive Web Design больше подходят тогда, когда нет разницы между
просмотром и использованием веб-сайта на мобильном и десктоп
устройстве, а также когда бюджет и срок разработки ограничены.
 Adaptive Web Design подходят в большинстве случаев, но наиболее
востребованы именно тогда, когда важна скорость загрузки страниц и
взаимодействие пользователя с мобильной версией сильно отличается от
использования браузерной десктоп версии.
Совет: Подготовьте таблицу с подсчетом сроков и бюджетов различных
вариантов реализации для какого-нибудь тестового сайта
Вопрос №1 – какой из вариантов выбрать?

12. Совет: Лучше приготовить список, из которого клиент сможет выбрать
необходимые для поддержки устройства.
Вопрос №2: Список поддерживаемых устройств
Определившись со списком устройств, договоритесь о разрешениях экрана,
при которых должен меняться дизайн страницы.

13. Проверки по дизайнам:
 наличие дизайнов под все указанные заказчиком типы устройств и
разрешений;
 в идеале наличие UI Kit (особо актуально для больших сайтов, т.к. найти
файл с дизайном, где указано, например, стандартное поведение кнопки при
наведении, довольно сложно);
 корректность выравниваний по сетке;
 наличие аккуратной структуры групп и слоев (и отсутствие лишних слоев);
 если в макете есть формы для ввода данных, то наличие примеров ее
заполнения со всеми сервисными сообщениями для разных устройств и
разрешений (это особенно важно для смартфонов);
 наличие информации о возможностиневозможности скроллинга, для
случая если объем контента не будет умещаться в отведенную ему область (т.
е. скрыть не уместившийся контент либо добавить скроллинг);
 наличие нестандартных шрифтов, если они использованы в дизайне, а так
же отсутствие в дизайне шрифтов с нецелым размером (не должно быть
шрифтов с размером 12,75);
 наличие комментариев относительно поведения страниц, отличающегося
для разных устройств и разрешений.
Вопрос №3 – макеты дизайна

14. Что делать, если какой-то информации по макетам не хватает?
Вопрос №3 – макеты дизайна

15. Сайт готов и передан заказчику.
Это все?

16. Чем это чревато для заказчиков:
 Сроки разработки сайта увеличатся из-за большого количества
возникающих правок, а значит это лишние переписки и согласования.
 Уважающий себя верстальщик не возьмется верстать такой макет или как
минимум удвоит/утроит сумму за работу.
 Неопытный или принципиальный верстальщик сверстает ровно так как
«нарисовано» дизайнером.
 Криво сверстанный и содержащий грамматические ошибки сайт, будет
подрывать доверие посетителей к услуге/компании.
 Необходимость внести мелкие корректировки в дизайн требует массы
усилий и времени со стороны всех участников команды.
Последствия плохого дизайна сайта

17. Вопросы

18. Контакты
https://www.facebook.com/lyudmyla.gulik
https://www.linkedin.com/in/lyudmyla-gulik-a042b637/
gulik.lyuda@gmail.com