Архив рубрики: Интерфейсы

Пользовательский интерфейс системы документооборота «Документатор»

Это из раздела «работы, не увидевшие свет».

Была как-то задача создать систему, агрегирующую документы лаборатории в едином хранилище с удобным интерфейсом поиска и управления документами. Погуглив, я нашел просто прекрасный сервис Dropbox, которым пользуюсь до сих пор. Он позволял хранить файлы из определенной папки на ПК в интернете, при этом можно пользоваться программой на разных устройствах, тем самым, имея отовсюду доступ к этим файлам, там же присутствует функция общего использования папок.

И, вроде, всем хорош Dropbox, только:

  • Для удобной работы нужно устанавливать специальное приложение на ПК, которое всегда загружает всю папку на жесткий диск.
  • Веб-интерфейс Dropbox довольно топорный, больше всего не хватает добавления и скачивания файлов перетаскиванием.
  • И самое главное, документы хранятся неизвестно где.

Поэтому было принято решение о создание собственного приложения с такими ключевыми особенностями:

  • Быстрый и удобный доступ к документам
  • Поиск по названию и содержимому документов
  • Функция предпросмотра документов (аналогичная Quick Look в Mac OS X) (кстати, она всё-таки была реализована в Документаторе 2.0, но об этом как-нибудь в следующий раз)
  • Единовременный импорт/экспорт множества файлов и папок
  • Поддержка версий документов

В качестве технической реализации планировалось использовать Adobe Flash Flex и для настольной  версии – Adobe Air, сервер – Java, а название – «Документатор».

Но, как это часто бывает, стало совсем не до этого, поэтому разработка остановилась на этапах исследования и прототипирования. Прототип я постарался детализировать, потому что… да просто так, захотелось.) Тогда я как раз только осваивал Mac OS X и в интерфейсе это заметно.

Документатор – "Ментальный" вид

Документатор – Стандартный вид

В общих чертах интерфейс вполне обычный, но есть в нём «изюминка» –  «ментальное» представление, от понятия ментальных моделей из «Проектирования интерфейсов» Купера. Ментальные модели – это модели, имеющие связь с объектами реального мира.

В данном случае «ментальный» вид позволял просматривать файлы относительно их принадлежности к отделу и дате создания. Для даты создания использовалась ментальная модель простого шкафа-архива документов, который нередко еще встречаешь в офисах.

Такая модель повторяет обыкновенный путь сотрудника к нужному документу: нужен, например, план финансирования на прошлый год – идем в бухгалтерию, находим ящик в шкафу с архивом за 2010 год и там ищем нужную папку с документом.

Интерфейсы выкладываю в свободное пользование. Если будете использовать их в работе, просто укажите на меня ссылку, этого хватит 😉

Новые интерфейсные решения в Android 2.3

В новой версии операционной системы для мобильных устройств Android 2.3 инженеры Google ввели можество интересных интерфейсных решений, в т.ч. обновленную индикацию состояния процессов.

Интерфейс Android 2.3

Интерфейс Android 2.3


Для индикации статуса подключений (мобильная сеть, Wi-Fi, 3G, EDGE, GPS и др.) введено несколько состояний:

  1. Способ подключения не используется (например, модуль wi-fi просто отключен) – серая иконка или отсутствие иконки
  2. Способ подключения готов к использованию – белая иконка
  3. Способ подключения используется – зеленая иконка с анимацией уровня сигнала или текущего трафика

Таким образом легко объясняется «позеленение» иконок вызова и иконки интернет-браузера в версии 2.3. Зеленый цвет «говорит», что эти способы коммуникации доступны и готовы к использованию.

Новые парадигмы интерфейса и сравнение со старым (2.2)

В целом интерфейс в 2.3 гораздо более логичный, понятный (особенно удачна строка статуса) и плавный в использовании.

Мой диплом о разработке и вводе в эксплуатацию веб-приложения

Буквально месяц назад в славном Московском Техническом Университете Связи и Информатики я защищал диплом «Разработка и ввод в эксплуатацию веб-приложения „Сурдосервер“».

Веб-приложение я начинал разрабатывать еще с августа 2009 года в рамках своей работы в лаборатории вместе со своими коллегами, за мной была инженерная часть и проектирование взаимодействия. Самые интересные моменты в плане разработки я апериодически выкладывал в этом блоге. Настала пора опубликовать и сам диплом. Самим приложением можно воспользоваться на сайте http://surdoserver.ru/.

Самые нетерпеливые могут сразу перейти к разделу со ссылками для скачивания всего этого добра.

О дипломе

Что внутри: в дипломе описан весь цикл разработки современного веб-приложения. Что он включает в себя:

  1. Исследование вопроса;
  2. Определение целей, достигать которые поможет веб-приложение;
  3. Экономический расчет;
  4. Проектирование пользовательского взаимодействия (проектирование интерфейса);
  5. Проектирование БД;
  6. Проектирование программной архитектуры;
  7. Разработка;
  8. Тестирование (в том числе нагрузочное тестирование);
  9. Ввод в эксплуатацию.

В этом дипломе в силу правил составления, расчет экономического эффекта (или т.н. технико-экономического обоснования) находится практически в самом конце, и, откровенно говоря, советую особо не вчитываться в полученные цифры, т.к. сделаны довольно… оптимистичные прогнозы =). Также отсутствует описание процесса тестирования кода, однако есть нагрузочное тестирование.

Что использовалось при разработке и какие результаты:

  • Создано полноценное приложение, которое содержит в себе свыше 400 страниц программного кода;
  • Использовались технологий: PHP, Zend Framework, JavaScript, HTML, Adobe Flex, ActionScript 3;
  • Приобретен и настроен «с нуля» удаленный сервер на основе «облачных» вычислений для обеспечения бесперебойной работы приложения в сети Интернет;
  • Приложение размещено на сервере, получены первые положительные отзывы пользователей на форуме глухих, в социальной группе глухих в сети «вКонтакте», а также посредством встроенной системы обратной связи;
  • В период с 1 февраля по 1 июня 2010 года сайт посетило более 4 100 уникальных пользователей, которые совершили более 88 000 переходов по сайту.

Содержание дипломной работы

  • ВВЕДЕНИЕ
  • Глава 1 Проектирование приложения
    • 1.1 Исследование предметной области
      • 1.1.1  Язык жестов
      • 1.1.2  Современные методы обучения языку жестов
      • 1.1.3  Актуальность проблемы интерактивного веб-приложения для изучения русского языка жестов
    • 1.2   Назначение и основные возможности проектируемого приложения
    • 1.3   Общая архитектура приложения
    • 1.4  Проектирование серверной части
    • 1.5    Проектирование базы данных
      • 1.5.1  Системный анализ предметной области
      • 1.5.2  Инфологическое проектирование
      • 1.5.3  Даталогическое проектирование
      • 1.5.4  Физическое проектирование
    • 1.6  Проектирование клиентской части
  • Глава 2 Технологическая платформа приложения
    • 2.1  Требования к серверной части приложения
      • 2.1.1  Операционная система
        • 2.1.1.1  Обзор современных сетевых ОС
        • 2.1.1.2  Выбор ОС в соответствии с предъявленными требованиями
      • 2.1.2  Система управления базами данных
        • 2.1.2.1 Обзор современных СУБД
        • 2.1.2.2 Выбор СУБД в соответствии с предъявленными   требованиями
      • 2.1.3  Языки программирования
      • 2.1.4  Веб-сервер
        • 2.1.4.1  Обзор современных веб-серверов
        • 2.1.4.2 Выбор веб-сервера в соответствии с предъявленными  требованиями
    • 2.2  Требования к клиентской части приложения
  • Глава 3 Техническая платформа
    • 3.1 Серверное аппаратное оснащение
    • 3.2 Клиентское аппаратное оснащение
  • Глава 4 Описание разработанных компонентов
    • 4.1  Архитектура приложения
      • 4.1.1  Теория
      • 4.1.2  Используемая архитектура
      • 4.1.3  Файловая структура
    • 4.2  Разработанные модули
      • 4.2.1  Сурдо
      • 4.2.2  Дактильная азбука
      • 4.2.3  Страницы
      • 4.2.4  Обратная связь
      • 4.2.5  Поиск
      • 4.2.6  Административная панель
  • Глава 5 Введение приложения в эксплуатацию
    • 5.1  Размещение в сети Интернет
      • 5.1.1 Обзор и выбор способов размещения приложения в сети Интернет
      • 5.1.2  Настройка серверов, подключение доменов
      • 5.2.2  Размещение приложения
      • 5.1.4  Настройка резервного копирования
    • 5.2  Нагрузочное тестирование
      • 5.2.1  Методология тестирования
      • 5.2.2  Результаты тестирования
        • 5.2.1.1  Loadimpact.com
        • 5.2.2.2  Apache JMeter
  • Глава 6 Разработка вопросов по экологии и безопасности жизнедеятельности
    • 6.1  Характеристика условий труда программиста
    • 6.2 Анализ опасных вредных факторов и возможных чрезвычайных ситуаций, возникающих во время работы программиста
      • 6.2.1  Уровень шума на рабочем месте
      • 6.2.2  Электромагнитное и ионизирующее излучения
      • 6.2.3  Статические нагрузки и монотонность труда
      • 6.2.4  Недостаточная освещенность
    • 6.3  Разработка мер безопасности
      • 6.3.1  Снижение уровня шума
        • 6.3.1.1  Теория
        • 6.3.1.1  Расчетная часть
      • 6.3.2  Приобретение оборудования, отвечающего стандартам  безопасности
      • 6.3.3  Устранение статических нагрузок и монотонности труда
      • 6.3.4  Расчет освещенности рабочего места программиста
    • 6.4  Выводы
  • Глава 7 Технико-экономического обоснование проекта
    • 7.1  Постановка задачи
    • 7.2  Стоимость разработки приложения
      • 7.2.1  Определение реальных сроков и количества участников разработки и внедрения приложения
      • 7.2.2  Расчет заработной платы персонала
      • 7.2.3  Расчет затрат на приобретение необходимых аппаратных и программных средств для разработки приложения
      • 7.2.4  Расчет затрат на размещение сайта в сети Интернет
      • 7.2.5 Расчет всех затрат
    • 7.3  Оценка эффективности от внедрения приложения
      • 7.3.1  Косвенная экономия средств
      • 7.3.2  Доход от работы сервиса
  • ЗАКЛЮЧЕНИЕ
  • СПИСОК ЛИТЕРАТУРЫ
  • Приложение А Программные листинги
  • Приложение Б Графические интерфейсы

Плакаты:

Сам диплом в pdf-формате.

При желании в качестве благодарности вы можете купить дипломную работу здесь.

Дизайн: jQuery плагин "Удобная кнопка удаления"

Собрался с силами и таки написал реализацию концепта более юзабельной кнопки удаления.)

Как это выглядит

Как это работает можно посмотреть на отдельной странице плагина. Там же можно скачать исходные коды и минифицированную версию плагина.

Как это устроено

Для начала примем, что кнопка удаления — это ссылка-кнопка с GET-параметрами для удаления какого-либо объекта из базы данных. Ссылка будет что-то типа такой: «http://example.ru/?action=delete&item_id=9000«.

При инициализации старая кнопка удаляется и на её месте с помощью абсолютного позиционирования размещается новая кнопка-ссылка со ссылкой для удаления, указанной в параметрах. Также добавляется скрытый элемент — панель с диалогом подтверждения удаления.

При нажатии на кнопку удаления из-под неё выдвигается панель с диалогом подтверждения удаления. Размещение элементов друг над другом возможно благодаря использованию связки CSS-аттрибутов: у кнопки удаления

position: absolute; z-index: 10

и у панели

position: absolute; z-index: 1

Дизайн: удобная кнопка удаления

Как часто в формах редактирования чего-либо кнопки «Обновить» и «Удалить» бывают абсолютно одинаковы по дизайну? Я думаю, каждый не редко встречал такое, при этом не редко их путаешь, и вместо внесения новой оригинальной правки в статью мы видим форму подтверждения удаления, которая в свою очередь обычно растягивается на всё пространство и блокирует другие элементы управления. Если при этом пользоваться, например, jQuery UI, то получается что-то типа такого:

Не очень-то юзабельно, правда?  Но прогресс не стоит не месте, и кое-где в западных веб-приложениях уже можно встретить более точное выделение кнопки «Удалить»:

При нажатии на которую всё также будет возникать всеблокирующее модальное окно.

А что если сделать меню подтверждения более контекстным и интерактивным? Например, выезжающим из-за кнопки «Удалить» при нажатии на неё:

а по окончании впечатляющей анимации получим следующее:

Вот таким вот нехитрым способом можно улучшить юзабилити простых вещей.

В будущем выложу это как расширение для jQuery.

UPDATE: сделал реализацию на javascript (jQuery), подробности в записи.