search

Waiviogit / waivio

MIT License
8 stars 7 forks source link

Design: Mobile navigation #369

Open WaivioLabs opened 4 years ago

WaivioLabs commented 4 years ago

Исследуем варианты дизайна многоуровневой навигации на мобильных устройствах. Есть ощущение, что текущая реализация sliding menus не всегда оптимальна.

В каждом новом комменте обобщаются разные варианты навигации.

Отдельно представлены TOP MENUS с вложенными переходами (левая колонка на desktop).

А потом PROFILE & OBJECTS где есть свои уровни меню и логика переходов.

На GitHub нельзя делать вложенных комментариев, поэтому обсуждать, наверное, проще будет в Discord / #design (используя ссылки на версии дизайна, например "1. Sliding Menus")

Варианты:

1. Sliding Menus - текущий вариант: меню в левых колонках на основных режимах и sliding menus на profile & object страницах; 2. Left Menus Everywhere - повторение концепции меню в левых колонках и на profiles & object pages 3. More Dropdown - sliding menus становятся фиксированными с кнопкой more и выкидным списком для пунктов, которые не помещаются на экране 4. Permanent vertical - sliding menu заменяется на фиксированное вертикальное меню 5. Page with blocks - summary page из блоков, которые можно show more/less или делать переход

WaivioLabs commented 4 years ago

Version: 1. Sliding Menus

Начнем с описания текущей навигации и вариантов ее развития.

TOP MENUS

Основное меню достаточно короткое и на большинстве современных телефонах показывается целиком. Поэтому эффект sliding menu на этом уровне почти никогда не будет виден.

image

  1. Переход по TOP заголовкам
  2. Переход на вложенные уровни меню
  3. Вызов меню из любого места (чтобы не надо было крутить наверх)
  4. При прокрутке feed вниз мы убираем 2ую и 3ю строки меню. Но при движении в обратную сторону мы можем их показывать не дожидаясь возвращения на самый верх.
  5. Дополнительные опции, например, Filters: add или Sorted by Rank или Map показываются только внутри выбранного режима.

PROFILE & OBJECTS

При показе профайлов пользователей или страничек объектов TOP MENU убирается и для возврата надо либо нажать WAIVIO logo или hamburger menu справа наверзху. Можно также использовать back button.

image

  1. Если меню не помещается на экране, его можно slide
  2. После перехода, выбранное меню остается на том же месте и выделяется оранжевым цветом.

Проблемы с sliding menu:

  1. На desktop в узком окне мышкой невозможно продвинуть меню (вместо этого происходит выделение текста в меню - 1). Нужно использовать touch, если есть такая возможность, либо находить тоненький slide control под меню (2).

Фикс: правильно обрабатывать hold & drag событие на меню

image

WaivioLabs commented 4 years ago

Version: 2. Left Menus Everywhere

По сути, sliding menus сейчас используются только на Profiles и на страницах объектов. Можно попробовать их изобразить с использованием левого меню, как в других режимах.

TOP MENU

Без измений

PROFILE & OBJECTS

На desktop произвести замену на левое меню:

image

Можно будет потом добавить и другие пункты меню, например то, что сейчас находится в правой колонке (Transfers, Power Up/Down, Exchange и т.п.)

При таком подходе на Profile страницах можно все еще показывать Top Menu, так как оно не противоречит меню в левой колонке.

Мобильная навигация на Profile может повторять Top навигацию:

image

По аналогии с Profile можно переработать и страницы объектов.

Проблемы:

  1. Повторение Top Menu навигации на профайлах и объектах может не облегчить парадигму для пользователей, а наоборот запутать их - например по гамбургер кнопке (верхний правый угол) будет вызываться Top Menu, а не Profile/Object.

  2. На мобильном не видны другие опции меню Profile / Object, пока их не выберет пользователь. Это лимитирует discoverability для новых посетителей.

Дело в том, что страницы объектов должны напоминать websites компаний и страницы товаров, а там как правило используется полоска горизонтального меню. И наш текущий вариант со sliding menu по идее вписывается в эту концепцию лучше.

WaivioLabs commented 4 years ago

Version: 3. More Dropdown

Этот вариант базируется на sliding menus парадигме навигации, но сам slide заменяется на фиксированное меню more.

TOP MENU

Без изменений.

PROFILE & OBJECT

При открытии more показываются только те пункты меню, которые не попали в видимую часть строки меню.

image

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

Меню на страницах объектов делается аналогичным образом.

Проблемы:

  1. Лишний клик, чтобы открыть доп пункты меню (slide как правило воспринимается пользователями как менее затратное действие по сравнению с кликом).
WaivioLabs commented 4 years ago

Version: 4. Permanent vertical

Все пункты меню отображается вертикально полным списком.

TOP MENU

нет дизайна

PROFILES & OBJECTS

image

POBLEMS:

Занимает слишком много полезного места на экране.

WaivioLabs commented 4 years ago

Version: 5. Page with blocks

Идея в том, что страница profile и объектов играют роль summary page, где блоками показана ключевая информация из разных разделов и эту информацию можно либо show more/less (open in-place) или ведут на открытие новых страниц с полными списками и полной информацией. Для возврата в summary page надо нажимать back button.

Этот подход используется facebook на profile pages, а Amazon использует для показа продуктов.

image

Проблемы:

Имплементация этого варианта займет значительное время. Понятно, что и FB и Amazon довольно эффективны в том, что они делают, но новые успешные социальные и shopping приложения обычно делают облегченные варианты дизайна.