Four new possibilities for Nordic House's users

Website: www.nordichouse.co.uk

"Nordic House" is an online store of Scandinavian style decor for home. There are many interesting products on this website. But users may not even finish checkout due to usability issues.

I am describing 4 problems of this website 4 new possibilities of obtaining more purchases and more satisfied users.

1. Broken menu button
2. Tricky basket section
3. Messy Product page
4. Inappropriate response to adding to bag

Who has broken the menu button?

The first problem appears on mobile and tablet version. Remember, mobile and tablet traffic is about half of all traffic!
Also "UK adults now spend more time on their mobile devices than traditional desktop PCs for the first time". It means that the first-time experience should be smooth, easy and successful.
But who broken the menu button?

Nordic House mockups

Website: www.nordichouse.co.uk

Mobile version

Current version on mobile

My header mockup on mobile

Фильтры на примере 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). По умолчанию эта настройка была бы отключена. Но я говорю именно о полном пути, а не только об отображении родительской папки.

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

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

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

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