Юзабилити или как сделать ваш сайт идеальным

1. САЙТ!
МНЕ СРОЧНО НУЖЕН САЙТ!

2. ЩАС СДЕЛАЕМ!
НЕДОРОГО И БЫСТРО!

3. НЕДОРОГО И БЫСТРО!
ВЕБСТУДИЯ ЗА РАБОТОЙ!

4. СМОТРИ А У НЕГО САЙТ ЕСТЬ!

5. УБОГИЙ ТО КАКОЙ САЙТ!

6. НУ И САЙТ!

8. СКИНУ ДРУЗЬЯМ ПОРЖАТЬ!

11. ЧЕМУ УДИВЛЯТЬСЯ?

12. ВЕДЬ
«НЕДОРОГО И БЫСТРО»

13. САЙТ ОТ КОРОГО ВСТАНУТ…

14. …КЛИЕНТЫ В ОЧЕРЕДЬ!

15. САЙТ
ВИЗИТКА
БЛОГ
СТАТИЧНЫЙ
ДИНАМИЧНЫЙ

16. 1 задача пользователя:
попасть на сайт
Инструменты:
•переход из поисковой системы
•имя сайта
•ссылка на страницу
•QR code

17. 1. Нейминг

18. -Алло, доча, а где я могу почитать твою статью?

19. -Папусик, на хабре, я же говорила!

20. -Где, где?

21. -Хабрахабрточкару

22. -Хабрбаброхымчто?

23. Хорошее название сайта
1.Свободно
2.Понятно
3.Приятно
4.Читается*
5.Пишется*
6.Запоминается*
*выход ссылок в оффлайн-можно встретить на рекламных плакатах, в метро, *в прессе, где угодно.

24. Сразу нет
1.Сложным иностранным словам –boutique.ru
2.Репликам на популярные сайты–moogle.ru
3.Сложным транслиретациям–shyotka.ru

26. ЗАНЯТО!

27. ПРОВЕРЯЕМ
НА NIC.RU

28. Будущее*
1.Свободное имя в зоне .ruили .com
2.Свободный хэштегв twitter
3.Свободный адрес в vkontakte
*которое уже наступает

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

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

31. Ссылка на страницу
vk.com/dmitry_nikotin
vk.com/id162687310
Если по ссылке которую вам присылали, хотя бы примерно можно понять, что ожидает пользователя на странице –это очень и очень хорошо.

32. QR коды
QR Code–лучший способ дать пользователю возможность быстро и без труда открыть ваш сайт с мобильного устройства.
Многие, у кого установлен QR scanner, считывают код просто из любопытства. Чем не дополнительная реклама?

37. 2. Архитектура

38. Модульная сетка
Единый каркас исхема расположения всех основных блоков иэлементов, проходящий через всестраницы сайта.

39. Модульная сетка
Сетки бывают простые исложные, гибкие виспользовании инеочень.

40. Модульная сетка
Сетки бывают простые исложные, гибкие виспользовании инеочень.
Это нестоль важно.

41. Модульная сетка
Важното, чтоесли выприпроектировании дизайна задали определенную сетку модулей—будьте добры ейследовать.
Отпервой допоследней страницы своего проекта.

47. Масштабируемость
В наше время, когда увсех пользователей самые различные мониторы, есть смысл делать преимущественно «резиновые» сайты.
Т.е.сайты, которые масштабируются подразрешение монитора пользователя.

48. *Проверить через плагин WindowResizerв браузере Chrome

49. *Проверить через плагин WindowResizerв браузере Chrome

50. 3. Дизайн

52. *Исследование 55 дизайн студий и студий веб-разработки
82% сайтов имеют легкий дизайн с натуральными и спокойными цветами
Темные сайты гораздо чаще имеют большую типографику
Часть сайтов имеют очень живые, яркие цвета

53. *Исследование 55 дизайн студий и студий веб-разработки
82% сайтов имеют легкий дизайн с натуральными и спокойными цветами
Темные сайты гораздо чаще имеют большую типографику
Часть сайтов имеют очень живые, яркие цвета

61. Видео
Серфинг

62. Шрифтовая схема
Большая часть сайтов смотрится цельно изавершенноприпостроении дизайна наоснове одного-трехшрифтов.

63. Шрифтовая схема
Базовый шрифт—основной шрифт материалов сайта. Акцидентный—шрифт длязаголовков.

64. Шрифтовая схема
Внекоторых случаях вводятсядополнительные шрифтыдля: -меню инавигации
-блоков выделения (важной информации, цитат, выносок)
-длямелкого текста, сцелью повысить читабельность

67. Реакция напользователя
Необходимо спланировать, что будет происходить сэлементами, реагирующими надействия пользователя.
С чем работаем:
•Появление страницы
•Динамика смены важных элементов
•Наведенные состояния
•Выпадающие и всплывающие формы

68. Фрагмент макета сайта, накотором показаны трисостояния навигации: обычный вид меню, пункт меню принаведенном курсоре, выделение текущего раздела.

70. НО

71. Реакция напользователя - динамика
•Не должна раздражать, напрягать, отвлекать внимание от контента.
•Общее время динамики минимально
•Один динамический элемент в единицу времени

72. 4. А компот?

74. header
logo
top navigation
search
sidebar
navigation
SM box
SM icons
content

75. 2задача пользователя:
понять «где я?»,
«Как сюда можно попасть еще раз»
Инструменты:
•логотип (по совместительству быстрый переход «домой»)
•заголовок страницы
•выделение текущего пункта меню (каталога)
•хлебные крошки
•Social media box

76. footer
navi
navi
breadcrumbs
counter

77. 3задача пользователя:
Получить актуальную информацию

78. Чтобы привлечь внимание людей к чему-то, надо чтобы это что-то было.
Мы предполагаем, что хороший контент у вас есть, а мы лишь помогаем донести его до читателя.

79. Форматирование текста
Когда пост написан одной сплошной «простыней», глазу не за что зацепиться, и у читателя автоматически включается режим «много букаф, не буду читать».

80. Форматирование текста
Когда пост написан одной сплошной «простыней», глазу не за что зацепиться, и у читателя автоматически включается режим «много букаф, не буду читать».
Чтобы добиться лучшей «читаемости» текста используйте:
•абзацы
•заголовки
•выделение ключевых фраз жирным и курсивом
•таблицы
•списки

83. Форматированный текст лучше сплошного, а форматированный текст с картинками лучше их обоих.
Картинка сразу же привлекает внимание и разбавляет текст, делая его более интересным.
Картинки

86. Анонс
Если вы вспомните обычный выпуск новостей, то он начинается с анонса — диктор говорит «В этом выпуске вы увидите» и быстро перечисляет заголовки новостей.
Когда вы услышите этот список новостей, что-то вас да и заинтересует, и вы не переключите канал.

89. Аттракторы
В англоязычной литературе есть такое слово —attractor. Им обозначают все, что привлекает внимание.

90. Попробуйте найти общие элементы у следующих обложек журнала!

92. Обратная связь:
контент + комментарии = новый контент

100. 4 задача пользователя:
«Найти вас в реальном мире»
Инструменты:
•контакты, адреса
•карты и ссылки на них

102. 4 задача пользователя:
«Найти вас в реальном мире»
Если размещаете физические адреса:
•снабдите их картой
•опишите путь для автомобилистов
•опишите как добраться пешком, на общественном транспорте
*Помните, что «Барочная 4a» это не более чем юридический адрес, который *может быть известен всем водителям маршрутки не иначе как «У столба с *аистами остановите пожалуйста».

115. НО

116. Все плюшки старайтесь реализовывать не только графически,но и программно.
Плюшки должны приносить пользу.

117. 5. MUST HAVE

118. MUST HAVE страницы для бизнеса
•Страница “О нас”.
•Список клиентов
•Страница списка услуг
•Страница портфолио
•FAQ -Frequently Asked Question(s)

122. Спасибо!