Николай Слёзкинский - «Экранные приложения с большим количеством информации»

821 views

Published on

http://2013.profsoux.ru/papers/31/

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
821
On SlideShare
0
From Embeds
0
Number of Embeds
421
Actions
Shares
0
Downloads
14
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Николай Слёзкинский - «Экранные приложения с большим количеством информации»

  1. 1. Экранные  приложения  с  большим  количеством  информации.    Проблемы  и  предлагаемые  решения    На  примере  электронных  торговых  площадок  Слёзкинский  Николай,  Devexperts  
  2. 2. Обычно  информация  подается  в  какой-­‐либо  удобной  форме.      Торговые  системы  —  не  исключение:  
  3. 3. Например,  в  виде  таблицы  
  4. 4. Таблица  
  5. 5. Таблица  
  6. 6. Или  списком  
  7. 7. Списки  
  8. 8. Еще  вариант  —  представление  в  виде  графика  
  9. 9. Графики  
  10. 10. Графики  
  11. 11. Но  что  делать,  когда  информации  много  больше,  и  она  требуется  вся  сразу?  
  12. 12. Решение:  Использовать  модули  (виджеты)  и  расположить  их  на  одном  экране.  
  13. 13. Становятся  очень  важными  плотность  информации  и  разделение  бизнес-­‐данных  и  действий  над  ними:  —  фильтрация;  —  сортировка;  —  объединение  в  группы;  —  вызов  торговых  функций;  —  …  
  14. 14. Фильтрация  /  вызов  торговых  функций                          
  15. 15. Объединение  в  группы  /  вызов  торговых  функций                          
  16. 16. Проблема  №1:  Нерациональное  использование    свободного  экранного  места.  
  17. 17. Нерациональное  использование  экранного  места  
  18. 18. Нерациональное  использование  экранного  места              Площадь  топ-­‐бара  отдана  только  под  заголовок  и  кнопки  управления  окном  Без  необходимости  большая  высота  бара  Блок  с  фильтром  и  кнопка  занимают  2,5  строки,  место  используется  не  эффективно                          
  19. 19. Нерациональное  использование  экранного  места  Без  необходимости  большая  высота  строк              
  20. 20. Данные  в  таблице  не  адаптируются  под  ее  размер    Много  места  отдано  вспомогательным  данным                Длинные  названия  столбцов  таблицы              
  21. 21. Громоздкие  полосы  прокрутки  Элементы  управления  имеют  избыточные  размеры                            
  22. 22. Решение:  —  Увеличить  плотность  данных.  —  Группировать  модули.  
  23. 23. Шаг  первый.  Увеличить  плотность.  А  именно:  —  Максимально  использовать  топ-­‐бары.  —  Адаптировать  данные  в  таблице  (названия  столбцов,  вторичные  данные).  —  Уменьшить  массивные  элементы  управления.  
  24. 24. Основное  управление  —  в  топ-­‐баре                          
  25. 25.                        Данные  внутри  таблицы  —  плотнее  
  26. 26.                        Данные  адаптируются  под  размер  таблицы              
  27. 27. Компактные  элементы  управления                                                  
  28. 28. Шаг  второй.  Объединить  модули  в  группы.  Как  вариант  —  использовать  табы.  
  29. 29. Группы  модулей                          
  30. 30. Было  Стало  В  результате  
  31. 31. Проблема  №2:  Низкая  информативность  из-­‐за  слабого  контраста  данных  и  элементов  управления.  
  32. 32.                                    Чрезмерная  насыщенность  элементов  управления  и  заголовков              
  33. 33.                      Графический  шум  
  34. 34. Решение:  —  Визуально  разделить  бизнес-­‐данные  и  управление.  —  Уменьшить  графический  шум.  
  35. 35. Шаг  первый.  Разделить  бизнес-­‐данные  и  управление.    А  именно,  усилить  контраст  между:    —  данными  и  управлением;  —  приоритетными  и  второстепенными  /  повторяющимися  данными.      
  36. 36. Контраст  между  данными  и  элементами  управления  Элементы  управления    Данные  
  37. 37. Контраст  между  самими  данными  Приоритетные  данные  Второстепенные,  повторяющиеся  данные  
  38. 38. Шаг  второй.    Уменьшить  графический  шум:    —  приглушить  и  уменьшить  рамки;  —  убрать  чересполосицу;    —  приглушить  сетку;  —  использовать  активные  и  обычные  состояния  элементов  управления;  —  уменьшить  массивные  элементы  управления.  
  39. 39. Сетка,  чересполосица,  массивные  элементы    Уменьшены  рамки  Убрана  чересполосица  и  приглушена  сетка    Уменьшены  массивные  элементы  управления  
  40. 40. Неактивный  и  активный  топбар                          
  41. 41. Итог  
  42. 42. Было  
  43. 43. Стало  
  44. 44. Стало  
  45. 45. Решения,  которые  помогли  улучшить  систему:  —  Максимально  использовать  топ-­‐бары.  —  Оптимизировать  данные  в  таблице  (длина  названий  столбцов,  вторичные  данные).  —  Переработать  массивные  элементы  управления.  —  Объединить  модули  в  группы.  —  Разделить  бизнес-­‐информацию  и  управление.  —  Использовать  активные  и  неактивные  состояния.  —  Уменьшить  визуальный  шум  (сетки,  рамки,  чересполосица).  
  46. 46. Вопросы  
  47. 47. Спасибо  

×