Провалы и лучшие практики в дизайне, UI/UX корпоративніх порталов и digital workplace решений

1. Дизайн интрАнета
Anna Kravets
CEO, ANROM Social Business
больше, чем картинка
525 px
40 px

2. Дизайн интрАнета
Anna Kravets
CEO, ANROM Social Business
больше, чем картинка
525 px
40 px

3. # digital workplace
# interactive intranet
# UI/UX
akravets@anromsocial.com
Cell-phone, Telegram,
WhatsApp:
+ 38 068 908 25 33
Об ANROM Social Business
Finance &
Insurance
Tech Health Telecom Retail & FMCG Other
Кто я?
Анна Кравец
CEO
ANROM Social Business

4. Навигация
Доступность
Содержимое
Поиск
Скорость работы
Функциональность
Красота
или
удобство?
Брендбук, модные тренды
Иконки, Картинки, Шрифты
"Шапки", "Уши", "Подвалы"

5. Красота
или
удобство?
Понты на конференциях
Легко продать
Ускорение процессов
Быстрее обучение
Удобней поддержка
Лучше посещаемость
Больше ROI

6. Когда “красота”
в приоритете

7. Стильная картинка от дизайнеров

8. После 1.5 мес. согласования с гендиректором
Дизайн в день запуска

9. …через 9 месяцев после запуска

10. Aesthetic-Usability Effect
Парадокс,
когда пользователи
считают более
красивый на вид
дизайн удобней, чем он
есть на самом деле

11. Наши
дизайн фак-апы

12. Цвет настроенья - красный

13. Эффект Лондонских дизайнеров

14. Бренд – наше все

15. Яйца и Ветки

16. Операция “Навигация”

17. Идеальный вредный пример (уже не наш)
http://www.theworldsworstwebsiteever.com

18. Лучшие
практики

19. Главная страница

20. Главная страница

21. Страница подразделения

22. Страница подразделения

23. Страница рабочей группы

24. Страница рабочей группы

25. Мобильная версия

26. Мобильная версия

27. Креативные
фишки

28. Веселый progress bar
https://codepen.io/Errec/pen/RQYPXz

29. Нескучный логин

30. Формы, которые не пугают

31. Как оценить
дизайн портала?

32. Data-driven подход. Что люди делают?
• Usability Hub
• Chalkmark
• Helio
• Яндекс Метрика
Клик-тесты
• Usabiity Hub
Навигационные тесты
• TeamViewer
• Zoom.us
• Screencast-o-Matic
Модерируемые удаленные исследования
• EyesDeside
• Inspectlet
• EyeSee
Eyetracking (окулография)

33. Data-driven подход. Что люди говорят?
• Google Forms
• Survey Monkey
• Jot Forms
A/B testing, Опросы
• Usabiity Hub
5-секундный тест

34. Как сделать
крутой дизайн?

35. Каковы вводные?
Бизнес-задачи
Принципы UI/UX
Обратная связь пользователей
Бюджет
Ограничения платформы
Ограничения среды (браузеры, разрешения экрана и т.п.)
Юристы (персональные данные, трудовой кодекс)
1
2
3
4
5
6
7

36. Собираем
требования
Определяем
ограничения
Управляем
ожиданиями –
доносим
ограничения
Делаем ТЗ для
дазайнера
вместе с
интегратором,
ИТ!
Доносим
дизайнеру
ограничения
Оцениваем
согласно
требованиям
Оцениваем
на реализуемость
Тестируем с
пользователями
Согласуем со
стейкхолдерами
Запускаем на всех

37. Картинки Иконки Инфографика
https://www.pexels.com
Дизайн своими руками
GIF анимашки
https://www.iconfinder.com https://piktochart.com http://www.screentogif.com

38. АннаКравец
CEO
ANROM Social Business
akravets@anromsocial.com
+ 38 068 908 25 33
Спасибо за внимание :)