The program for a tablet (iPad, etc.) that is connected to the radar and video camera.

1. Тестовое задание Junior UX designer Лебедева Юлия

2. Чего-то не хватает в личных знаниях… Вооружаемся книгами!!! Какими? Стив Круг Веб-дизайн: книга Стива Круга или «Не заставляйте меня думать» Как сделать сайт удобным. Юзабилити по методу Стива Круга Джеф Раскин Интерфейс: новые направления в проектировании компьютерных систем Алан Купер Психбольница в руках пациентов Алан Купер об интерфейсе: основы проектирования взаимодействия

3. Читаем, читаем и ещё раз читаем!

4. Пробегаем глазами по тексту задания… … пытаемся понять, о чём в нём говорится... А потом тщательно его разбираем. Итак, по порядку…

5. Читаем самые первые строки задания: «Сотрудник ГИБДД Василий каждый день несёт дежурство…»

6. Стоп, стоп, стоп! Здесь уже стоит остановиться! Необходимо определить нашего персонажа. Кто он? Кто такой Василий? И что из себя представляет? Читаем самые первые строки задания: «Сотрудник ГИБДД Василий каждый день несёт дежурство…»

7. Может быть он один из таких? Добрый и улыбчивый? Кузнечкин Василий Андреевич Литвиновский Василий Станиславович

8. А может быть он такой? Серьёзный? Дядястёпов Василий Михайлович

9. А может быть вообще такой? Суровый дядечка? Пупков Василий Вениаминович

10. А может быть здесь мы увидим Василия? Хммм?…

11. В общем, каким бы он ни был, он может быть любым из представленных выше Он сотрудник ГИБДД Считаем, что он верен своему делу! :) И главная его цель обеспечивать Безопасность Дорожного Движения

12. Василию нельзя отвлекаться по мелочам Постоянно нужно следить за потоком транспорта... Фиксировать нарушения… Наказывать нарушителей…

13. По заданию: «…центр…решил помочь Василию и другим сотрудникам ГИБДД, закупив партию прекрасных планшетных компьютеров… Это специально разработанные устройства могут соединяться… со стационарной камерой и радаром…» В процессе работы над заданием изучаем не только книжки, но и дополнительно смотрим информацию во Всемирной Паутине.

14. … что относится к работе сотрудников ГИБДД… … как работают радары и камеры… … проектирование под планшетные компьютеры… … примеры приложений… … и многое, многое другое…

15. Рассуждаем над заданием, анализируем, пробуем представить… … рисуем, записываем, делаем наброски…

16. Имеем под рукой пример планшетного компьютера … смотрим, насколько удобно им пользоваться…

17. Рассуждаем… От блокнота Василия надо однозначно избавить! А вот от рации, наверное, пока не стоит! Нельзя придумать функции на планшетном компьютере, которая бы полноправно могла заменить рацию. При условиях хорошей связи, куда быстрее будет передать срочную информацию по рации, чем набирать сообщение на компьютере. По заданию: «…средством оповещения у него служит рация, а ещё он привык носить с собой блокнот и записывать важную для него информацию: номера и приметы машин…ориентировки о нарушителях от коллеги…»

18. Какая основная информация нужна Василию для работы? Как облегчить оформление нарушений, происходящих на дороге? Как организовать обмен сообщениями с коллегами? Каковы будут сообщения из Центра? Возникающие вопросы…

19. Рассуждаем о разрабатываемой программе… Основная идея программы в том, что она явно должна помочь Василию: - Следить за движением транспорта Ведь к компьютеру подключена камера видеонаблюдения. - Фиксировать нарушителей Должны автоматически фиксироваться нарушения по превышению скорости, благодаря подключенному к компьютеру радару. Должен обнаруживаться транспорт, находящийся в «чёрном списке» (если номер транспорта опознается и совпадает с номером, находящимся в базе тех, кого нужно перехватить). - Оформлять штрафы нарушителям Представим, что Центр ГИБДД закупил не только планшетные компьютеры, но и небольшие компактные принтеры, которые подключены, допустим, по Bluetooth :) В программе должно быть предусмотрено заполнение штраф-квитанции, а в некоторых случаях и протокола изъятия прав. Это сэкономит время – некоторые поля будут уже заполнены автоматически, а кроме «ручного» заполнения в двух экземплярах, на компьютере можно будет сделать только один, а потом просто распечатать его в двух экземплярах за несколько секунд. Также программа должна содержать электронную версию ПДД и актуальную таблицу штрафов для облегчения «разбора полётов» с нарушителями.

20. - Посылать и получать от коллег сообщения Эти сообщения не будут личного характера. Сообщения будут касаться нарушений. Например, необходимо остановить нарушителя с такими-то приметами, а все приметы уже зафиксированы системой через камеру. Это может быть отдельный стоп-кадр, либо небольшое видео, плюс сопутствующие данные (место совершения, дата и время), плюс небольшой комментарий. Отправляем либо получаем сообщение с этими данными и сразу всё понятно. - Получать особые сообщения из Центра Это будут сообщения со статусом особой важности – план «Перехват», поэтому в программе они должны отображаться отдельно от других и привлекать к себе особое внимание.

21. Представим, что каждый день, заступая на дежурство, Василий включает свой планшетный компьютер и авторизуется в системе Возможно, это может быть пара значений: личный логин Василия и актуальный пароль ГИБДД на текущий день. Также есть идея, если это возможно технически, реализовать авторизацию в системе по отпечатку пальца. Система должна чётко определить текущее местоположение Здесь должна оказать помощь великолепная GPS -навигация. Учитывая, что, если каждый сотрудник ГИБДД в данный момент также использует свой компьютер, то… Все компьютеры должны быть связаны в единую сеть, включая основной компьютер Центра ГИБДД. Рассуждаем дальше… и представляем…

22. Тем временем на компьютере Центра на карте отображается - кто и где находится Это одна из возможностей компьютерной системы Центра. Карту видно не только в Центре, но и каждый из сотрудников на посту сможет видеть у себя на планшете подобную карту, В некоторых случаях это понадобится, например, чтобы определить коллег, находящихся по близости (см. 68 слайд).

23. Необходимо сделать скетчи интерфейсов

24. Для наброски скетчей останавливаемся на Adobe Illustrator Необходимо сделать скетчи интерфейсов

25. Главный экран по умолчанию Учитываем, что по умолчанию всегда должен осуществляться просмотр с камеры видеонаблюдения.

26. Место для особо важной информации: план “Перехват” из Центра. При появлении становится красным и постоянно мигает (см. 48 слайд) Количество новых сообщений от коллег // при нажатии открывается список всех входящих сообщений (см. 70 слайд) Вывод информации о скорости движения Кнопки для сохранения стоп-кадра, либо записи видео текущего момента с камеры наблюдения “ Служебная” информация: пользователь, местонахождение, время, заряд батареи Сообщения с радара / камеры о нарушителях по скорости (см. 44 слайд) // Отображается последнее. Возможен просмотр остальных здесь же через эффект «листания». Количество точек ниже равно количеству сообщений. Черная точка означает текущее положение

27. Видеоизображение движущегося транспорта на экране

28. Может быть таким :

29. А так как видеоизображение будет зависеть от положения камеры… Также таким: Или таким: Сейчас пока не обсуждаем подробно, как будет происходить анализ движения транспорта в каждой из полос. Поэтому большинство примеров будет приведено для одной полосы.

30. Отображение распознанного номера

31. Номер едущей машины: легко распознается программой

32. Считается, что программа «умная», и может распознавать любые номера (разных стран), в том числе и номера мотоциклов (в случае, если камера направлена на заднюю часть транспорта). Следовательно, надо будет решить, какой размер окна для распознавания номера будет наиболее оптимальным. Распознавание номера может быть частичным (если номер по какой-то причине не читабелен). В таком случае система должна выдать часть, которая распозналась, либо выдать сообщение, что номер вообще не распознаваем.

34. Сохранённые стоп-кадры и видео

35. Просмотр всех стоп-кадров нарушений Нажатие на миниатюру конкретного стоп-кадра для просмотра (см. далее)

36. Просмотр конкретного стоп-кадра Кнопка для возможности отправить стоп-кадр как сообщение кому-то из коллег, дополнительно написав комментарий (см. 65 слайд) Кнопки в виде треугольничков слева и справа для просмотра остальных стоп-кадров через эффект «листания»

37. Просмотр всех видео нарушений Нажатие на миниатюру конкретного видео для просмотра (см. далее)

38. Просмотр конкретного стоп-кадра Кнопка для возможности отправить видео как сообщение кому-то из коллег, дополнительно написав комментарий (см. 65 слайд) Кнопки в виде треугольничков слева и справа для просмотра остальных видео через эффект «листания»

39. Обнаружение нарушителя по скорости

40. (1) Представим… Василий с утра заступил на смену. И до нынешнего момента на дороге было всё довольно тихо и спокойно. Поэтому он, сидя у себя в автомобиле, скучая, уже который час смотрит на экран планшетного компьютера и наблюдает за проезжающими машинами. Тут на горизонте неожиданно появляется серенький «Астон Мартин», несущийся со скоростью 150 км / ч. Камера с радаром глядят на неё своим зорким взглядом и сообщают Василию (см. далее): «Эй, дружок! Да у нас тут нарушитель! Он намного превышает допустимую скорость! Вот как он выглядит, а вот тебе его номер. Давай, поднимай попу и останавливай его скорей. У тебя есть, по нашим подсчётам ,примерно секунд двадцать, пока он безнаказанно не пронёсся мимо тебя!..» И через несколько секунд Василий уже наготове машет нарушителю своим жезлом…

41. При появлении нарушителя по скорости обязательно должен быть звуковой сигнал! Обозначение транспорта- нарушителя Появление красной рамки и её мигание вокруг видеоизображения и номера транспорта Значок внимания Текущая скорость транспорта-нарушителя (выделена красным) и скорость, допустимая на данном участке (выделена светло-серым) // Изображение немного не соответствует действительности, показано исключительно для примера

42. Считаем, что система с помощью камеры и радара отслеживает все нарушения по скорости. Даже если Василий занят в данный момент, она запоминает у себя в памяти все эти данные. Если с момента нарушения скоростного режима прошло достаточно времени, то есть смысл эти данные сразу направить в Центр, где уже сами решают – отправить штраф нарушителю по адресу или запомнить нарушителя в «чёрный список». Последние актуальные (скажем так, в пределах нескольких минут) данные можем хранить на компьютере, когда у Василия явно ещё есть вероятность остановить транспорт. Такие данные оформляются в системе как сообщения с радара / камеры. Например, происходит нарушение по скорости – система сообщает об этом. Если Василий занят в данный момент (оформлением штрафа, проверкой документов и пр.), то сохраняется сообщение о нарушении по скорости. Проходит несколько минут, и, если Василий всё ещё занят, и вероятности остановить транспорт уже нет, сообщение автоматически отправляется в Центр. Если Василий не занят, то он просматривает входящее сообщение с радара / камеры и находится наготове остановить и оштрафовать транспорт-нарушитель. Сообщения приходят в таком формате: Стоп-кадр нарушителя, номер транспорта, время, место, текущая скорость, разрешённая скорость. Василий, естественно, должен быть заинтересован, чтобы подобные сообщения отправлялись в Центр как можно реже, то есть обрабатывать нарушения самостоятельно, иначе зачем он находится на посту :)

43. Просмотр сообщений о нарушителях по скорости

44. // Если текущее время намного превышает время совершения нарушения, (например, более 5 мин) сообщения автоматически отправляются в Центр, а отсюда удаляются Выбор конкретного сообщения для просмотра (см. далее) Последнее из сообщений. Просмотр остальных здесь же через эффект «листания». Количество точек ниже равно количеству сообщений. Черная точка означает текущее положение Просмотр сообщений с радара / камеры

45. Просмотр конкретного сообщения с радара / камеры Кнопка для оформления штрафа на месте (см. 56 слайд) Кнопки в виде треугольничков слева и справа для просмотра остальных сообщений через эффект «листания»

46. Денёк у Василия выдался не из скучных. Начался дачный сезон и поток машин казался бесконечным. У кого-то надо проверить техосмотр, кого-то поругать за не пристёгнутые ремни, кому-то указать на просроченную страховку… А что ещё делать?.. Если образовалась пробка, и поток в среднем двигался от силы 50 км / ч, если не меньше. Соответственно нарушителей по скорости просто не могло и быть. Поэтому компьютер, можно сказать, сегодня «отдыхал» от информации о подобных нарушениях, и на своём экране просто показывал поток транспорта дачников (возможно, не только дачников, но их точно было большинство). « Н у и денёк!» - подумал Василий, устало зевая. И мысленно стал представлять, как он будет отдыхать на своей даче в следующие выходные. Не успел он расплыться в улыбке, как на экране монитора высветилось и запищало сообщение из Центра по плану «Перехват» (см. 48 слайд). Здесь уже все сладкие мысли как рукой сняло! Где-то по дорогам колесит злостный нарушитель (что точно он нарушил, пока неизвестно, но Василий точно знает, что всё это очень серьёзно), и теперь поток машин нужно отслеживать более тщательно! (2) Представим…

47. Сообщение из Центра по плану «Перехват»

48. Подсветка красным и постоянное мигание сообщения из Центра // В примере приметы машины: цвет, марка, номер (по которому система будет обнаруживать транспорт в следующем примере). Однако в качестве примет может быть что угодно При появлении такого сообщения должен Быть звуковой сигнал!

49. Подобное сообщение было получено всеми коллегами Василия, и наверняка все из них сейчас находятся в режиме «боевой готовности», тщательно отслеживая проезжающие машины. Такое не раз случалось. Но не думал Василий, что ему в этот раз так «повезёт», и транспорт, который нужно перехватить, движется именно в его направлении, и компьютер поможет Василию его «вычислить». Что же происходит на экране монитора, когда транспорт появляется в поле зрения камеры?.. Этого Василий точно не может не заметить! (см. далее) У него есть все шансы получить от Центра благодарность за перехват!

50. Обнаружение транспорта, подлежащего перехвату Ситуация, когда опознаваемый номер совпадает с номером, указанным в приметах.

51. При появлении такого транспорта обязательно должен быть особенный звуковой сигнал! Обозначение обнаруженного транспорта Появление красной рамки и её мигание вокруг видеоизображения // Изображение немного не соответствует действительности, показано исключительно для примера Красная подсветка и мигание распознанного номера транспорта

52. Что-то подобное может происходить, когда номер транспорта просто находится в «чёрном списке» (например, нарушитель не оплатил штраф в течение положенного времени). Значит, если распознаваемый номер движущегося транспорта совпадает с номером, находящимся в «чёрном списке», программа должна давать об этом знать.

53. «Разбор полётов»…

54. (3) Представим… В один из прекрасных весенних дней Василию попадаются на дороге немало так называемых «гонщиков» за адреналином. И кто как только не нарушает правила дорожного движения! Тут попадается даже один лихач, который превышает скорость на 75 км / ч ! Опачки! А у одного лихача вообще подложный государственный регистрационный номер! Всем сейчас точно не поздоровится! Одному выписываем штраф, а вот второго лишаем права управления транспортом и отбираем удостоверение!

55. Для первого есть неопровержимое доказательство по превышению скорости (см. 56 слайд). Ему оформляем штраф-квитанцию! (см. 60 слайд) А что там говорит второй? Что мы не имеем права так с ним поступать, и «да где это всё написано»?!... А вот и написано! Сейчас мы ему всё и покажем. Вот таблица штрафов, где «чёрным по белому» (см. 57 слайд)… а вот и ссылка на ПДД (см. 58 слайд)… Ну, как, спорить ещё будем?! Оформляем протокол! (см. 61 слайд)

56. // Изображение немного не соответствует действительности, показано исключительно для примера Просмотр конкретного нарушения по скорости Нажатие на кнопку для оформления штрафа (см. 60 слайд)

57. Выбор конкретного нарушения для просмотра соответствующего пункта ПДД (см. далее) Просмотр таблицы штрафов

58. Просмотр пунктов ПДД

59. Оформление нарушений…

60. Некоторые из полей уже оказываются автоматически заполненными (для наглядности шрифт серым цветом) Заполнение полей с помощью виртуальной клавиатуры (для наглядности шрифт синим цветом) Оформление квитанции на штраф

61. Оформление протокола Некоторые из полей уже оказываются автоматически заполненными (для наглядности шрифт серым цветом) Заполнение полей с помощью виртуальной клавиатуры (для наглядности шрифт синим цветом)

62. Нажатие кнопки для печати документа на принтере // команда аналогична как для штраф-квитанции, так и для протокола)

63. Отправка и получение сообщений

64. Сообщения? Какими они могут быть? Особо важные сообщения из Центра мы уже разобрали, они будут отделены от всех остальных сообщений и будут высвечиваться в отдельном месте. Также мы уже говорили, что сообщения от коллег навряд ли будут личными, значит они будут касаться исключительно нарушений. В арсенале имеются стоп-кадры нарушений по скорости с камеры / радара, а также стоп-кадры и видео других нарушений, которые в некоторые моменты потребуется отправить коллегам. Все они могут быть отправлены как сообщения, кроме того к сохранённым стоп-кадрам и видео есть возможность сделать дополнительный комментарий (см. далее). Подобные сообщения будут приходить и от коллег.

65. Нажатие на кнопку, чтобы добавить комментарий и отправить сообщение (см. далее) // Показан пример отправки для видео. Для стоп-кадра всё будет аналогично, и только для нарушений по скорости не будет комментария

66. Место для комментария в виде листа блокнота (порадуем Василия :)) буквально на одно предложение Возможность «писать» пальцем по экрану // что и показано в примере либо использовать виртуальную клавиатуру Написание сообщения

67. (4) Представим… Зафиксировано нарушение, все доказательства которого имеются на компьютере (в виде стоп-кадра или видео). В данный момент решено остановить транспорт с целью наказания. Машем жезлом… Но не тут-то было! Транспорт как ни в чём ни бывало не обращает на нас внимания и проносится мимо. Что делать? Сообщим-ка мы об этом негодяе коллегам, находящимся по близости по ходу движения. Как узнать кто именно и где находится? Система сама всё знает и даёт выбор, каким коллегам в ближайшем радиусе можно послать сообщение (см. далее).

68. Отображение личного местоположения (фиолетовый флажок) Местонахождение коллег (синие метки) Отправка сообщений с указанием адресатов на карте (1) // Изображение на карте при необходимости можно увеличивать и уменьшать разведением и сведением пальцев

69. Уже выбранный адресат Отправка сообщений с указанием адресатов на карте (2) Выбор коллеги-адресата, нажатием на метку (цвет метки меняется с синего на красный)

70. Просмотр входящих сообщений Количество новых сообщений Непрочитанные сообщения (выделены серым цветом) Выбор конкретного сообщения для просмотра (см. далее) // В примере показаны входящие сообщения, содержащие стоп-кадры или видео. Также могут встречаться сообщения с радара / камеры с других постов (если они специально посылаются коллегами, находящимися на этих постах), тогда они будут выглядеть как на слайдах 26 и 44, только без эффекта «листания».

71. Просмотр конкретного сообщения Кнопки в виде треугольничков слева и справа для просмотра остальных сообщений через эффект «листания» Текст сообщения Отправитель, его местонахождение, дата и время отправки сообщения Данные о стоп-кадре: когда и где был сделан

72. Дополнительно

73. (5) Представим… … что в работе Василия может понадобиться on-line просмотр карты, где всё видно как на ладони. И пусть на ней будет всё необходимое – дорожные знаки, разметки, пункты милиции, больницы, заправки и пр. И пусть по умолчанию точкой начала просмотра будет отображение на карте личного местонахождения и ближайшего окружения.

74. Организация поиска по карте // Изображение на карте можно увеличивать и уменьшать разведением и сведением пальцев // В примере не показано, но подразумевается, что при увеличении на карте будет видна и дорожная разметка

75. Необходимо бы сделать прорисовку интерфейсов

76. А д ля прорисовки интерфейсов остановились бы на Adobe Photoshop Необходимо бы сделать прорисовку интерфейсов

77. … это было тестовое задание…

78. Главные интерфейсы я показала скетчами. Сейчас в интерфейсах не везде показаны элементы управления для перехода между экранами…

79. … потому что здесь я описывала пока только свои основные идеи разработки программы…

80. В любом случае судить строго!

81. Благодарю за внимание! «Я только учусь» (с)