Фильтры на примере Skyscanner и Aviasales

Skyscanner: доступно в Google Play
Aviasales: доступно в Google Play

В этой статье я рассматриваю удобные и правильные решения для фильтров на примере приложений Skyscanner и Aviasales. Приложения предназначены для поиска авиабилетов. Я запускаю их на планшете.

Фильтры Skyscanner реализованы правильно с точки зрения юзабилити, а фильтры Aviasales содержат недоработки.

Skyscanner

Базовые вопросы о фильтрах, на мой взгляд, следующие:

• Панель фильтров легко или всегда доступна?
• Текущее состояние фильтров отображено на экране?
• В любой момент можно отменить фильтры?

В Skyscanner ответ на эти вопросы «Да».

• Да, панель фильтров отображается внизу экрана
• Да, активные фильтры отмечены галочками
• Да, кнопка отмены фильтров находится рядом на панели.

Список авиабилетов в Skyscanner и Aviasales

Skyscanner: доступно в Google Play
Aviasales: доступно в Google Play

Приложения Skyscanner и Aviasales нужны для поиска авиабилетов, отелей и проката машин. В этой статье я рассматриваю экран со списком авиабилетов.

Список авиабилетов и рейсов – это основной рабочий экран.
Чтобы быстро и легко принять решение о правильном рейсе, нужно чтобы:

• Информация была понятной, не вызывала недопонимания или сомнения.
• Информация была выделена в соответствии с важностью: сначала важное, потом детали.
• Информации не было слишком много за раз.

Эмоции против простоты и эффективности

Skyscanner: доступно в Google Play
Aviasales: доступно в Google Play

В этой статье я описываю, какие впечатления можно получить в первые 2 минуты работы со Skyscanner и Aviasales. Это приложения по поиску авибилетов, отелей и аренды машин.

Забегая вперед, приложение Skyscanner проще и функциональнее, быстрее показывает результаты, но не является победителем сегодняшней статьи. Приложение Aviasales выгодно отличается от Skyscanner тем, что вызывает эмоции и превращает поиск билетов в приятное занятие.

Забегая еще дальше, следущие 10 минут намного приятнее и эффективнее со Skyscanner. Об этом в этой статье.

Начальный экран

Форма Skyscannner имеет лаконичный, но выразительный дизайн, за счет контраста в цвете и начертании шрифтов. Она воздушная и легкая, при этом не часто используемые опции спрятаны. К этому я добавлю только один недостаток.

Недостаток: Легко перепутать, какая вкладка активна – ONE WAY или ROUNDTRIP. Пользователь думает: «Обычно активна первая вкладка. К тому же вторая вкладка отделена от контента жирной чертой. Значит, сейчас я во вкладке ONE WAY... С другой стороны, заголовки на форме голубого цвета, значит голубой цвет означает активную вкладку». И пользователь запутался!

Форма Aviasales... экран Aviasales отличается от Skyscanner.

Экран выбора параметров рейса Skyscanner

Экран выбора параметров рейса Aviasales

Экран Aviasales завладел вниманием пользователя. Пользователь забыл, например, о том, что он на работе, или о том, что у него на кухне молоко убегает. Это сильное качество приложения – увлекать, погружать.

Addition to the previous article

While I was translating the article about ES File Explorer, ES Global developers released a new 4.0.0.2 version!
It's really good that they improve and support the application!

A new version of ES File Explorer looks more modern and uses "Material Design".

My suggestions are about UI elements and Main Menu structure, not about visual design. So these suggestions can be used both in an old and a new version.

A new version 4.0.0.2 and my version:

These screenshots has been made on a smartphone while in previous article I used tablet.

What ES File Explorer could look like

Developer: ES APP Group
See app: on the Google Play
App version: 3.2.5.5
Installed: on Android tablet

ES File Explorer is a very popular Android file manager. The application has 4.5/5 rating from over 1.6 million reviews.
The application is free and has many features.

Although being very popular, the application has two unusual solutions which are likely to be difficult for new users. These solutions were developed for small screens some years ago. Nowadays these solutions are not really suitable for big smartphone and tablet screens and these solutions are still difficult for new users.

The two unusual solutions are two panels: the location panel [1] and the top panel with icons [2]. I will also pay attention to menu structure as it is an important part of any file manager application.

Existing users complain about interface, for example they wrote on the Google Play: "add fresh UI…", "it could have a better interface on tablets", "i've been using this app since 2010 and i love it. but i'm bored with its 2010 UI. Please update to the more modern look. the features are already better just the UI is so old", "It looks so antiquated when compared to more recent file managers", "Great app, but there is a learning curve", "It is not attractive at but does it's job well".

Although my suggestions presented in this article are about usability, they can also increase UI "freshness".
All the screenshots found in this article have been made on an Android tablet.

The location panel

Location panel elements perform five actions:

1. Open Main Menu
2. Go to a parent folder
3. Show current location (current folder)
4. Open History
5. Close current folder.

Problem

It is difficult for a user to understand the main purpose of the panel and which elements are important. That is because he sees many elements and some of them are unusual (the icon ">" is too far from the text; there is a "lonely" triangular icon).

Solution

In the application the user already can open several folders simultaneously in the different tabs. I suggest keeping on the panel only elements which are directly connected with the current folder. Main Menu and History buttons are not related to the current folder.

At the moment it's not obvious how to open History. The user is unlikely to decide to open History by touching the current folder name or the small triangular icon, and if he does so he would rather be surprised (confused).

I also suggest showing the "Back" button instead of parent folder name. It is not important for most users to know a parent folder name. They don't remember file system structure of Android OS. If a user don't find a file on the current level of file system hierarchy, he will likely just go back or will begin searching from another folder. Replacement of parent folder name by the "Back" button doesn't reduce application functionality, but it improves readability of a current folder name.

Action plan:

• Remove the triangular icon
• Move the menu icon to the top panel
• Move History to the action overflow menu
• Replace parent folder name with the "Back" button.

Action overflow menu contains several items: History, Settings and Quick settings (located in the Tools menu). To open this menu the user should touch "Three vertical dots" button in the top right corner.

Sometimes users would like to see a full path name, for example, when they browse system folders. So I would add quick setting "Show full path name: Yes / No". By default this setting would be set to "No". By the way, I talk about the full path name, not about parent folder name only.

Full path viewing version

Current and my version of the location panel (pictures are clickable):

Current version of the location panel

My version of the location panel

Как мог бы выглядеть ES File Explorer

Разработчик: ES APP Group
Доступно: в Google Play
Версия приложения: 3.2.5.5
Установлено: на планшет Android

ES File Explorer очень популярный файловый менеджер под Android. Приложение имеет высокий рейтинг 4,5 на основании более 1,6 миллиона оценок. Приложение бесплатное и имеет много возможностей.

Несмотря на свою популярность, в приложении есть два нестандартных решения, которые, вероятно, своей оригинальностью вызывали непонимание у новых или неопытных пользователей. Эти решения были разработаны для маленьких экранов устройств. Сейчас, спустя два года, на больших экранах телефонов и на планшетах эти решения уже не так уместны и по-прежнему непонятны пользователям.

Я говорю о панели со строкой пути [1] и панели с иконками по центру [2]. Также я обратила внимание на структуру основного меню (глобальную навигацию) как важную часть любого файлового менеджера, и хочу предложить изменения в структуре.

Существующие пользователи тоже обращают внимание на интерфейс и пишут в отзывах на Google Play: «добавьте свежий UI…», «занимает много времени, чтобы разобраться, где что находится», «я пользуюсь приложением с 2010, но мне уже наскучил 2010 UI», «непривлекательный, но очень хорошо делает свою работу», «хорошее приложение, но присутствует кривая обучения», «старомодный по сравнению с новыми файловыми менеджерами».

Хотя мои предложения направлены на понятный интерфейс, они смогут, в том числе, «освежить» ES File Explorer. Все скриншоты, приведенные в тексте, сделаны с планшета.

Панель со строкой пути

Панель выполняет целых пять действий:

1. Открывает меню по иконке
2. Дает возможность подняться в родительскую папку
3. Показывает текущее местоположение
4. Открывает «Историю просмотренных папок»
5. Закрывает текущую папку.

Проблема

Пользователю сложно разобраться, для чего конкретно нужна панель и какие элементы на ней важны. Он видит большое количество элементов, и некоторые из них нестандартного вида («>» на большом расстоянии от текста; одинокая треугольная иконка).

Решение

В приложении можно открыть одновременно несколько папок в разных вкладках. Я предлагаю оставить на панели только те элементы, которые непосредственно относятся к текущей папке. Вызов «Истории» и открытие основного меню не относятся к текущей папке.

Открытие «Истории» неочевидно для пользователей. Вряд ли пользователь решит открывать «Историю» нажатием на название текущей папки (или на маленький треугольник).

Также я предлагаю вместо родительской папки показывать стрелку «Назад». Обычным пользователям не важно, какая родительская папка у текущей папки. Они не запоминают структуру файловой системы планшета. Если на текущем уровне нет файла, пользователь, вероятнее всего, вернется назад или начнет поиск в другом месте. Замена родительской папки на стрелку «Назад» не уменьшает функционал приложения. Но без названия родительской папки текущая папка легче «читается».

Список шагов:

• Убрать иконку треугольника
• Переместить вызов «Истории» в меню дополнительных действий
• Переместить иконку меню на верхнюю панель
• Заменить название родительской папки на стрелку «Назад».

В меню дополнительных действий, которое открывается по по кнопке справа «Три точки», несколько пунктов: история просмотренных папок (History), настройки приложения (Settings) и быстрые настройки (Quick settings), которые сейчас расположены в разделе Tools.

Бывают случаи, когда пользователям может быть удобно видеть полный путь, например, при просмотре системных файлов. Поэтому я бы добавила быструю настройку «Отображать полный путь до файла: Да / Нет» (список с быстрыми настройками находится внутри раздела Tools). По умолчанию эта настройка была бы отключена. Но я говорю именно о полном пути, а не только об отображении родительской папки.

Вариант с отбражением полного пути

Текущий и предложенный варианты панели со строкой пути (картинки кликабельны):

Текущий вид панели со строкой пути

Предложенный вариант панели со строкой пути

Usability recommendations for Diaro app (tablet version)

Developer: PIXEL CRATER LTD
See app: on Google Play
Installed: on the Android tablet

I wrote these recommendations based on 8 users interview and my opinion. Recommendations are for Android tablet version. I am myself have been using Diaro for 8 months and I really like it! Others were first time users. Their age: 26-30 (6 users) and 45-50 (2 users). All of them regularly use tablets. 

The article is about how to help new users get a good Diaro experience.

Folder editing

Problems: Users expect that tapping on back arrow will save folder settings, but it doesn't. Folder color picking is difficult.

Recommendations:

• Save changes by "Back" button, remove "OK" button. Currently users don't notice "OK" button (5 of 8 users). Most likely it is because all controls in this view are located on the left while "OK" button is in the right corner. 2 users explained that "Back" button saves changes on the note editing screen so they expected same behavior here.
• Add a "Color line" near the Folder name to show the user meaning of the color. Change color of the line when the user picks the color on the palette.
• Add a palette of harmonious colors instead of Color picker. Hide colors already used for other Folders so that the user don't get folders with the same color. Automatically assign new color to new folders. It's easier and more quickly way of color selection.
• Add a "real" example of background usage. Currently users (4 of 4 who taps on the Background) can't understand what is a "Background" for Folder.

Current folder editing

My version

Наблюдения за пользователями Diaro

Разработчик: PIXEL CRATER LTD
Доступно: в Google Play
Установлено: на планшет Android

Узнать о хороших решениях в Diaro можно в этой статье.

Недавно я решила показать знакомым приложение Diaro. Я пользуюсь им на планшете. Мне интересно, могут ли новые пользователи легко разобраться в Diaro, какие у них впечатления.

Набралось 6 человек возраста от 26 до 30 лет и двое людей 50 лет. Они регулярно пользуются планшетом.

Плавающая кнопка

Я попросила пользователей создать заметку. 4 пользователя потратили 20-40 секунд, чтобы найти плавающую кнопку. Они несколько раз просмотрели экран сверху вниз. Двое из них нажали на «+» рядом с заголовком «Категории». Один пользователь нажал на иконку «Три точки» на верхней панели.

Кроме того, что пользователи не знакомы с Material Design, другие элементы страницы привлекают на себя внимание и отвлекают внимание от плавающей кнопки. Например, реклама внизу страницы и элементы управления в левой части.

Пользователи сразу нашли кнопку, расположенную на верхней панели.

В приложении есть настройка «Отображать/Скрывать плавающую кнопку». По-умолчанию отображается плавающая кнопка. При изменении настройки отображается «+» на верхней панели.

Я бы показывала по-умолчанию «+» на верхней панели и добавила к иконке текст «Добавить запись» (так как на экране несколько «+»). Изменение кнопки на плавающую я бы оставила для опытных пользователей.

Плавающая кнопка

Мой вариант с кнопкой на верхней панели

Не нашли плавающую кнопку для добавления заметки и закрыли программу	1 из 8
Нашли кнопку с трудом и были удивлены / недовольны местоположением	4 из 8

Почему я пользуюсь Diaro на планшете

Разработчик: PIXEL CRATER LTD
Доступно: в Google Play
Установлено: на планшет Android

Узнать о проблемах в приложении Diaro можно в этой статье.

Я написала о четырех вещах, которые мне нравятся в Diaro. Я пользуюсь им на планшете около года. У приложения есть веб-версия и версия для телефона, но их я открываю редко.

Иногда я буду упоминать о «моей выборке» пользователях. Это 6 человек возраста от 26 до 30 лет и двое людей 50 лет.

Цветовое кодирование категорий

Для каждой категории задается цвет, и этот цвет используется в календаре и в списке записей. Для меня это существенно облегчает навигацию по списку и дает визуальную информацию об актуальности категории.

В отзывах к приложению на Google Play пользователи также упоминают «color code». Я спросила своих знакомых, полезно ли для них такое кодирование. Для большинства полезно, хотя 2 из 8 человек ответили, что для них цветные полоски всего лишь «декор».

Цветовое кодирование категорий

Five main problems with Note list for users

Developer: Cubeactive
See app: on Google Play
Installed: on the Android tablet

It's a translation from Russian. Оригинальная статья здесь.

The first problem: the calendar (the centerpiece UI element) has limited functionality

When creating an note application you can go several ways.
First way is to show notes are a flat list which displays new notes at the top.

Second way is to show every note for a specific day on the calendar. Such applications are used by people whose work is closely connected with time and meetings planning. Or by people, keeping a diary.

Note list is an application, which is following second way.
It contains following ideas:

• The calendar. In the vertical orientation it is very large and takes more than a half of the screen! In the horizontal orientation it is on a central place.
• Each note is linked to a specific date ("calendar date"). "Calendar date" can be changed, that is a note can be moved to another date in the calendar. Additionally any note has two different  dates: a calendar date and a date of note editing.

But although the idea of calendar is used in the application, the Note list calendar is not as informative as it could have been.
All that you can see on the calendar is presence or absence of notes on a specific date.

What else could have been shown on the calendar:

• How many notes are linked to a specific date
• A folder (category) of a note
• Note priority

In this case, the calendar will be useful and will take a central place in notes navigation. The calendar must be suitable to browse through day of weeks, months, etc. But in the current version of the calendar there are a few problems with that, for example:"Today"is not highlighted when there are some notes for today, weekends are never highlighted. There are other problems with calendar browsing which I will not mention here.

In the horizontal orientation the calendar is smaller than in vertical. It is more logical because less information an element provides, less space is taken. But developers need to decide whether their users need the "calendar" approach, and if "Yes", then enhance the calendar.

Пять основных проблем Note list для пользователей

Разработчик: Cubeactive
Доступно:в Google Play
Установлено: на планшет Android

English version of this article is here.

Первая проблема: календарь имеет ограниченную функциональность

При создании приложения с заметками можно пойти несколькими путями.

Один из путей показывать заметки в виде списка, наверху которого отображаются новые заметки.

Другой путь показывать заметки, созданные на определенные дни в календаре. Такая возможность нужна людям, чья деятельность тесно связана со временем и планированием встреч. Или, например, людям, которые ведут дневник.

Note list – это приложение, которое следует второму пути.
В нем реализованы следующие идеи:

• Календарь. В вертикальной ориентации он большой и занимает больше половины экрана! В горизонтальной ориентации он расположен в центральном месте.
• Каждая заметка привязывается к определенной дате («календарная дата»). «Календарную дату» можно впоследствии изменить, то есть перенести заметку на другое число в календаре. У заметки различаются «календарная дата» и дата редактирования заметки.

Но хотя в приложении присутствует идея календаря, сам календарь Note list не такой неинформативный, как хотелось бы.
Все, что можно увидеть по нему – наличие или отсутствие заметок на определенную дату.

Что еще можно было бы показать в календаре:

• Сколько заметок сделано на определенную дату
• Папку (категорию) заметки
• Приоритет заметки

В этом случае календарь начнет приносить пользу и займет центральное место в навигации по заметкам.

Календарь должен быть удобным для просмотра дней и месяцев. Но в текущей версии в календаре с этим есть некоторые проблемы. Например, не выделяется сегодняшний день, если на сегодня уже добавлены заметки, выходные не выделены цветом.

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

Пять проблем Evernote для пользователей

Разработчик: Evernote
Доступно: в App Store
Установлено: на iPhone

Первая проблема: перегруженный домашний экран

Домашний экран Evernote легко отпугнет новых пользователей. Во-первых, тусклый зеленый цвет фона. Во-вторых, много информации, и вся она примерно одинаково выглядит. Неясно, с чего начать. Нет большой заметной кнопки, поэтому придется просматривать все подряд.

Экран вызывает много вопросов, которые достойны отдельной статьи. Поэтому, чтобы не отходить от темы, скажу только, что на этом этапе – первое знакомство с приложением – Evernote теряет своих потенциальных пользователей.

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

Вторая проблема: непонятное отображение напоминаний в списке заметок

В списке заметок для напоминаний не отображается дата и время напоминания, только иконка «Будильник».

Если пользователь добавил определенное напоминание, то он ожидает увидеть время и дату напоминания при просмотре заметок. Это, во-первых, поможет ему спланировать день или будущие дела, быстро оценить, если ли напоминания на завтра. Во-вторых, поможет быстро найти напоминание, с целью изменить его дату или убедиться, что дата верная.

Для примера: пользователю надо убедиться, что дата заметки выставлена на 12:30 на завтра. Так как дата и время не видны в списке заметок, придется сделать несколько лишних движений, чтобы найти, на какое же время задано напоминание.

В общем, отображение даты и времени поможет пользователю не тратить лишнее время и соответствует его ожиданиям.

Кроме того, это убережет пользователей от ошибок! Сейчас можно легко спутать время напоминания с временем создания заметки, так как иконка «Будильник» и указание даты/времени воспринимаются связанно. Такие ошибки будут достаточно неприятны, особенно для деловых людей.

Ошибка спутать время напоминания с временем создания заметки

Первое, что приходит в голову по первой картинке: «Так, у меня напоминание, что в 15:22 – съездить на встречу».
Первое, что приходит в голову по второй картинке: «Почему у меня напоминание «Съездить на встречу» – показывается на вчера? Надо переставить напоминание».

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

Чтобы посмотреть дату напоминания, есть возможность перейти на отдельный экран «Список напоминаний», но это отвлечет пользователя от текущих задач, и нужно будет возвращаться назад.

Если просроченные напоминания будут выделены цветом (например, красным) и напоминания «на сегодня/завтра» будут выделены цветом (например, синим), это сделает напоминания более информативными.

Отображение даты напоминания не занимает много места: «Завтра в 15:00». Также, будет проще редактировать дату: достаточно будет кликнуть в дату, а не открывать swipe-меню с быстрыми командами.

Проблема существует для опытных пользователей и для тех, кто использует Evernote в деловых целях.

Online diagrams and flowcharts: Lucidchart vs Gliffy vs Draw.io

 

It's a translation from Russian. Оригинальная статья здесь.

Sometimes I have to draw diagrams. What about you? I used to draw schemes in applications that I already have on my PC like Photoshop or PowerPoint. But it takes a lot of time and effort to draw a scheme in one of these! What a sad story! It's time to change something! For example, to find a more convenient application!
I decided to find an online editor in order not to download or install any programs. It would be good if a scheme will be stored on the cloud, thus it can be changed from any computer. I would also like to edit a scheme on a tablet, but looking ahead, the editors have problems with this =(.

Google returns many results for «online diagram» query. I tried the first three results: free Draw.io and shareware Lucidchart and Gliffy. It's great that you don't need to register to begin drawing in these three.

I can't say which editor is better for professional use (eg, engineering, electrical diagrams, business process diagrams) because I don't draw such schemes. But for home usage I prefer Lucidchart! Its free version allows you to store up to 5 diagrams - that enough for me. In Draw.io developers have paid attention to functionality, but haven't paid attention to convenience of the user interface.

Below I will tell you more about each of these three editors.

Обзор online редакторов диаграмм – Lucidchart vs Gliffy vs Draw.io

Мне иногда приходится рисовать схемы. А Вам? Обычно я рисовала их в том, что есть под рукой: в Photoshop или PowerPoint. Но это отнимало много сил и времени. Грустная история. Пора с этим что-то делать! Например, найти более удобное приложение.

Чтобы не скачивать и не устанавливать программы, я решила найти онлайн редактор. Заодно, может быть, схема будет храниться в облаке, и ее можно будет изменять с любого компьютера. Хотелось бы еще редактировать схемы на планшете, но, забегая вперед, у редакторов с этим сложности =(.

По запросу «online diagram» в Google нашлось много результатов. Я попробовала первые три: бесплатный Draw.io и частично бесплатные Lucidchart и Gliffy. Отлично, что не нужно регистрироваться, чтобы начать рисовать.

Я не могу сказать, какой редактор лучше для профессионального использования (например, инженерные, электрические схемы, схемы бизнес-процессов), потому что такие схемы я не рисую. Но для домашнего, простого использования мне больше всего понравился Lucidchart! В его бесплатной версии можно хранить до 5 диаграмм, мне этого достаточно. В Draw.io разработчики уделили внимание функциональности, но не уделили внимание удобству интерфейса.

Ниже я подробнее расскажу про каждый редактор.