More Related Content
Similar to 4front Елена Белоножко
Similar to 4front Елена Белоножко (20)
4front Елена Белоножко
- 1. Как не изобретать велосипед, или кратко о секретах создания удобного веб-интерфейса Елена Белоножко XB Software Ltd.
- 2. То чувство, когда ты решаешь usability-задачу…
- 3. И ты прекрасно знаешь, как ее решить).
- 4. Принцип проектирования Это принцип взаимодействия пользователя с интерфейсом. Шаблон Не просто периодическая задача и описание основных принципов ее решения, а шаблон проектирования взаимодействия.
- 5. Принцип проектирования Это принцип взаимодействия пользователя с интерфейсом. Никакого дизайна! Шаблон Не просто периодическая задача и описание основных принципов ее решения, а шаблон проектирования взаимодействия.
- 6. Интерфейсы создаются, чтобы ими пользовались.
- 7. Принципы проектирования 1. Прямые действия 2. Легким касанием 3. Применение переходов 4. Не уходя со страницы 5. Очевидность приглашений 6. Мгновенная реакция
- 8. Принципы проектирования 1. Прямые действия 2. Легким касанием 3. Применение переходов 4. Не уходя со страницы 5. Очевидность приглашений 6. Мгновенная реакция
- 9. Прямое управление "Where there is output, let there be input." Alan Cooper, SW designer & programmer
- 10. I Прямые действия Шаблоны взаимодействия: 1. Непосредственное редактирование 2. Перетаскивание 3. Непосредственное выделение
- 11. 1. Непосредственное редактирование Виды взаимодействия: - Редактирование однострочного текста - Редактирование многострочного текста - Редактирование в оверлее - Редактирование в таблице - Групповое редактирование - Конфигурирование модуля I Прямые действия
- 12. Главное правило! Если отображение информации важнее возможности ее редактирования – скрываем до взаимодействия с контентом. (с) (с) Тетушка Сова
- 13. Редактирование однострочного текста Основная проблема: ЗАМЕТНОСТЬ IПрямоеуправление 1.Непосредственноередактирование Решения: - Всплывающая текстовая подсказка (Click to edit) - Подсветка области с возможностью редактирования - Превращение указателя мыши в текстовый курсор - Избегайте использования двойного щелчка мыши для активизации режима редактирования
- 14. Редактирование комментария в Facebook
- 15. Редактирование комментария в Facebook 1 2 3
- 16. Редактирование многострочного текста Основная проблема: РАЗНИЦА МЕЖДУ РЕЖИМОМ ОТОБРАЖЕНИЯ И РЕЖИМОМ РЕДАКТИРОВАНИЯ IПрямоеуправление 1.Непосредственноередактирование Решения: - WYSIWYG (What You See Is What You Get) - Умеренное использование анимации - Равное пространство под режим отображения и редактирования
- 17. Редактирование заметки в Backpack (37signals) 1 2 3
- 18. Редактирование в оверлее Основная проблема: КОГДА СЛЕДУЕТ ИСПОЛЬЗОВАТЬ IПрямоеуправление 1.Прямоеилинепосредственноередактирование Решения: - Если существует вероятность нарушения структуры контента страницы в режиме редактирования - Если модуль редактирования больше отображаемого значения Рекомендации: - Оверлеи для редактирования данных должны быть одинаковыми с облегченным стилем - Перемещаемое окно – лучшее решение
- 19. Редактирование данных в Wildberries
- 20. Редактирование в таблице Основная проблема: ВИДИМОСТЬ IПрямоеуправление 1.Прямоеилинепосредственноередактирование Решения: - Делать редактирование таблицы в веб-приложении похожим на настольное. - Контент ячейки в режиме редактирования может перекрывать остальные ячейки. - Переход в режим редактирования только по щелчку на ячейку.
- 21. Редактирование ячейки в Google Sheets 1 2
- 22. Групповое редактирование Основная проблема: ЗАМЕТНОСТЬ IПрямоеуправление 1.Прямоеилинепосредственноередактирование Решения: - Используйте подсказки - Соблюдайте принцип симметрии взаимодействия (Активация и выход из режима должен осуществляться одним способом)
- 23. Режим перемещения пиктограмм в iPhone 1 2
- 24. Режим группового редактирования в Basecamp 1 2
- 25. Конфигурирование модуля Основная проблема: ЗАМЕТНОСТЬ и ВИЗУАЛЬНЫЙ ШУМ Решения: - Соблюдайте Главное Правило (то, что с совой )) IПрямоеуправление 1.Непосредственноередактирование
- 26. Конфигурирование модуля в Top Stories (Yahoo!) 1 2
- 27. I Прямое управление 2. Перетаскивание Виды взаимодействия: - Перетаскивание объекта - Перетаскивание элемента списка - Перетаскивание модуля - Действия при перетаскивании - Группирование объектов путем перетаскивания
- 28. Основные проблемы: • ВИДИМОСТЬ • КУДА МОЖНО ПЕРЕТАСКИВАТЬ ОБЪЕКТ, А КУДА НЕЛЬЗЯ • ЧТО ПЕРЕТАСКИВАЕМ – САМ ОБЪЕКТ, ЕГО КОПИЮ ИЛИ ЕГО ОБРАЗ • ОБРАТНАЯ СВЗЯЬ ПРИ ПЕРЕТАСКИВАНИИ IПрямоеуправление 2.Перетаскивание 2. Перетаскивание
- 29. 1. Предусмотрите альтернативные способы перетаскивания элементов. 2. Обеспечьте обратную связь при перетаскивании. 3. Изменяйте указатель мыши. 4. Apple Guide: «Перетаскивание модуля должно начаться, если указатель мыши сместился на три пикселя или если кнопка мыши остается в нажатом состоянии более полсекунды» 5. Подсвечивайте область, доступную для размещения. 6. Минимизируйте сдвиг контента страницы в процессе перетаскивания. Решения: IПрямоеуправление 2.Перетаскивание
- 30. Управление профилем в Linkedin 1 2
- 31. Сортировка почты в mail.ru
- 32. 1 2 Сортировка файлов в Google Drive – D&D
- 33. Сортировка файлов в Google Drive – Альтернативный метод
- 34. Перетаскивание с лупой в iPhone 1 2
- 35. I Прямое управление 3. Непосредственное выделение Виды взаимодействия: - Выделение с помощью переключателя - Множественное выделение. - Выделение объекта. - Смешанное выделение.
- 36. Выделение с помощью переключателя IПрямоеуправление 3.Непосредственноевыделение Рекомендации к использованию: 1. Используйте для выбора элементов, расположенных в строках. 2. Для упрощения выбора элементов в произвольном порядке. 3. Чтобы указать выделенную строку используйте не только флажок, но и дополнительную подсветку. 4. При пейджинге операции могут выполняться только с элементами текущей страницы. 5. Опция Select all должна предоставлять инфо о кол-ве выделенных объектов и позволять осуществлять операции с ними. 6. Блокируйте операции, недоступные без выбора хотя бы одного элемента.
- 37. DHTMLX Email Box Demo
- 38. Множественное выделение IПрямоеуправление 3.Непосредственноевыделение Рекомендации: 1. Используйте специально отведенную область для сбора выделенных элементов, расположенных на разных страницах. 2. Операции выполняются для всех выделенных объектов.
- 39. Linkedin – управление рассылкой
- 40. Gmail – управление письмами
- 41. Выделение объекта IПрямоеуправление 3.Непосредственноевыделение Рекомендации к использованию: 1. Используйте шаблон выделения объекта, если объекты можно перетаскивать. 2. Обеспечьте возможность использования клавиш- модификаторов – Shift и Ctrl.
- 42. Flickr – управление альбомом
- 43. Смешанное выделение IПрямоеуправление 3.Непосредственноевыделение Исполнение: 1. Флажок для выделения объекта без открытия. 2. Непосредственное выделение для одновременного выделения и открытия объекта.
- 44. DHTMLX Email Box Demo
- 45. II Легким касанием Виды взаимодействия: - Видимые контекстные инструменты - Всплывающие контекстные инструменты - Переключаемые инструменты - Многоуровневые инструменты - Вспомогательное меню Закон Фитта «Время достижения цели зависит от расстояния до цели и ее размера». Контекстные инструменты:
- 46. Видимые контекстные инструменты IIЛегкимкасанием Контекстныеинструменты Плюсы: 1. Четкий призыв к действию. 2. Быстрой доступ к важным функциям. 3. Постоянно видны.
- 47. Список событий на events.dev.by 1 2
- 48. Gmail – список писем
- 49. Всплывающие инструменты IIЛегкимкасанием Контекстныеинструменты Рекомендации: 1. Используйте, если контент важнее инструмента. 2. Избегайте размещать в оверлее. 3. Значение пиктограмм должно быть очевидным. 4. Можно использовать текстовые ярлыки.
- 50. Лайк для наполнения профиля на piccsy.com
- 51. Антипример «Навести и заслонить» Антипример «Консервная банка»
- 52. Переключаемые инструменты IIЛегкимкасанием Контекстныеинструменты Рекомендации: 1. Минимизируйте изменения при смене режимов. 2. Используйте для второстепенных действий к которым нужно предоставить кратчайший путь.
- 53. Режим редактирования профиля Linkedin 1 2
- 54. Многоуровневые инструменты IIЛегкимкасанием Контекстныеинструменты Рекомендации: 1. Используйте многоуровневые инструменты, если хотите избежать отображения контекстных инструментов при наведении указателя мыши на объект. 2. Используйте кнопку-меню при наличии набора функций, одна их которых используется чаще других.
- 55. Issuu.com – управление отображаемым контентом 1
- 56. Issuu.com – управление отображаемым контентом 2
- 57. Вспомогательное меню IIЛегкимкасанием Контекстныеинструменты Рекомендации: 1. Стиль меню должен отличаться от меню браузера. 2. Во вспомогательном меню используйте только дублирующие команды. 3. Подходит для выполнения действий с группой выделенных объектов.
- 58. Вспомогательное меню на Google Maps
- 59. III Применение переходов Виды взаимодействия: - Приглушение и подсветка - Разворачивание и сворачивание - Заполнение пустот - Анимация Переход - «спецэффект», привлекающий внимание пользователя. Переходы создают «сюжет».
- 64. III Применение переходов Общие рекомендации: 1. Переходы создают «сюжет». 2. Скорость изменения события прямо пропорционально его важности. 2. Быстрое движение воспринимается, как нечто более значимое, чем изменение цвета. 3. События с приближением объекта кажутся важнее, чем события с отдалением. 4. Соблюдайте симметрию взаимодействия.