Пошаговая оптимизация контентного UX

Transcript

1. Пошаговая оптимизация контентного UX
3. 30 минут
4. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 28 30 31 Март 2019 ContentSense
5. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 28 30 31 Март 2019 ContentSense
6. 1 месяц
7. 20 000 000 Кросс-девайс посетители десктопной версии wikipedia.org
 в феврале 2019 года, по примерной оценке Яндекс Радар
10. Legibility research specific to digital text has shown that line length can affect reading speed. If lines are too long it is difficult for the reader to quickly return to the start of the next line whereas if lines are too short more scrolling or paging will be required. https://en.wikipedia.org/wiki/Line_length Dyson, M. C., & Haselgrove, M. (2001). The influence of reading speed and line length on the effectiveness of reading from screen. International Journal of Human-Computer Studies, 54(4), 585-612.
11. https://en.wikipedia.org/wiki/Line_length Shaikh, A. Dawn (July 2005). "The Effects of Line Length on Reading Online News". Usability News. 7 (2). Archived from the original on June 19, 2015. 35–95 символов
13. 205 символов
14. 2x
16. “Working with the community as closely as we do has its ups and downs. It means that when we reach consensus, which is our goal, that change management is easier, but it also means that it can take longer to make changes” Jared Zimmerman Director of UX at Wikimedia Foundation (2013–2015)
17. Давайте улучшим эти 30 минут
21. Сделайте работу за своего читателя
23. Типографика
24. Основной текст • Ширина строки • 35–95 символов в строке ✅ ⛔
25. Основной текст • Размер шрифта • 16–20 px ✅ ⛔
26. Основной текст • Межстрочное расстояние • Соотношение от 1,3 ✅ ⛔
27. Основной текст • Расстояние между абзацами • От двух межстрочных ✅ ⛔
28. Основной текст • Количество строк в абзаце • 5–10 строк ✅ ⛔
29. Основной текст • Контраст между текстом и фоном • Стремится к 21:1 ✅ ⛔
30. Заголовок • Шрифт • Должен отличаться от шрифта основного текста ✅
31. Заголовок • Размер • Больше размера шрифта основного текста ✅
32. Заголовок • Расстояние между элементами • От трех межстрочных ✅ ⛔
33. Заголовки • Вложенность • Разница в начертании или в размере ✅ ⛔
34. Ширина строки Размер шрифта Межстрочное расстояние Расстояние между абзацами Количество строк в абзаце Контраст
36. Структура поста
37. 8 из 10 человек быстро пролистывают статьи, в среднем читая только 28% слов https://www.nngroup.com/articles/how-little-do-users-read/
38. Структура поста • Деление на главы и части
39. Структура поста • Акцент на важном
40. Структура поста • Акцент на важном
41. Самая читаемая область статьи, на которую приходится 80% внимания пользователей, — это первые 550 пикселей https://www.linkedin.com/pulse/5-article-layout-tricks-keep-readers-reading-michael-vaccarino/
42. Структура поста • Содержание
43. Структура поста • Содержание
44. Перфоманс • Заключение
45. Деление статьи на главы
 и части Акцент на важном Содержание Заключение
47. Изображения
48. Люди тратят на просмотр визуальных элементов на 10% времени больше,
 чем на чтение текста https://www.nngroup.com/articles/photos-as-web-content/
49. Изображения • Большие обложки
50. Изображения • Фирменные иллюстрации
51. Использование цветов и брендированных визуальных элементов увеличивает запоминаемость бренда на 80% http://www.office.xerox.com/latest/COLFS-02UA.PDF
52. Изображения • Фирменные иллюстрации
53. Изображения • Фирменные иллюстрации
54. Изображения • Единый стиль в фотографии
55. Изображения • Стилизация изображений элементами брендинга
56. Статьи с визуальными элементами, вставленными через каждые 75-100 слов, получают вдвое больше «шеров» и «лайков» http://buzzsumo.com/blog/how-to-massively-boost-your-blog-traffic-with-these-5-awesome-image-stats/
57. Изображения • Картинки каждые 75–100 символов
58. Изображения • Картинки всю ширину поста
59. Большие обложки Брендинг и единый стиль в иллюстрациях и фотографиях Медиа-элементы каждые
 75–100 слов Картинки во всю ширину
61. Лэйаут страницы
62. Лэйаут страницы • Несколько объектов в одном экране
63. Лэйаут страницы • Сложносоставные списки
64. Лэйаут страницы • Карточки
65. Лэйаут страницы • Релевантные товары в сайдбаре
66. Лэйаут страницы • Релевантные посты в сайдбаре
67. Лэйаут страницы • Цитаты в сайдбаре
68. Лэйаут страницы • CTA (Call to action) в сайдбаре
69. Лэйаут страницы • Цифры и факты в сайдбаре
70. Лэйаут страницы • Цифры и факты в основной колонке текста
71. Несколько объектов в одном экране (карточки) Релевантные посты, товары, цитаты и CTA Цифры и факты в сайдбаре и в основной колонке текста
72. Роман Худоногов CO-FOUNDER & HEAD OF PRODUCT yes@setka.io setka.io
73. Бонус 8
74. Акценты • «Полотно текста» и отсутствие медиа-элементов
75. Акценты • Отсутствие цитат
76. Акценты • Отсутствие чисел и фактов
77. Типографика • Дефицит стилей оформления текста
78. Медиа-элементы • Выравнивание и размер
79. Изображения • Использование некачественных фото-стоков
80. Мобильная версия • Текст адаптирован только для десктопа
81. Мобильная версия • Нечитаемые элементы (масштаб)
82. Роман Худоногов CO-FOUNDER & HEAD OF PRODUCT yes@setka.io setka.io