Каково идеальное положение строки поиска на экране мобильного телефона? В правом верхнем углу или внизу?
Вот веб-приложение.

enter image description here

В этом случае панель поиска размещается вверху.

В дополнение к этому, почему положение панели поиска отличается в мобильном приложении и веб-приложении?

[Отредактировано] Мой вопрос касается положения панели поиска с точки зрения доступности и того, когда поиск является вашей основной функцией. Должен ли он быть расположен вверху или внизу, как в приложениях?

3
Ola Ström 7 Фев 2020 в 18:45
Вы говорите о строке поиска или о кнопке поиска, которая развернется в строку поиска? И это приложение или сайт?
 – 
jcaron
4 Фев 2020 в 11:43
Нет. Мой вопрос касается положения панели поиска с точки зрения доступности и того, когда поиск является вашей основной функцией.
 – 
NB4
4 Фев 2020 в 15:44
1
Идеальной позиции не существует, так как она полностью зависит от контента, который вы ищете, и остального контента на странице. Вы можете получить лучшие ответы, если предоставите более подробную информацию и, возможно, несколько скриншотов или макетов своих проектов.
 – 
James Coyle
4 Фев 2020 в 16:27
Вы также можете указать, имеете ли вы в виду «доступность» «безбарьерный» (например, для слепых людей, использующих программы чтения с экрана — вот почему я предположил) или «доступный» (большим пальцем на телефоне — как предполагал NB4).
 – 
virtualnobi
22 Фев 2020 в 21:34

3 ответа

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

enter image description here

2
NB4 5 Фев 2020 в 11:43

В отличие от Джеймса, я думаю, что есть хорошая и плохая позиция: поиск определяет, какие записи вообще будут показаны. Глядя на экран в обычном направлении чтения (сверху вниз даже для языков с письмом справа налево), фильтр/выбор/поиск должны читаться первыми, чтобы дать пользователю контекст того, чего ожидать.

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

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

1
virtualnobi 5 Фев 2020 в 10:55
Я не говорил, что нет плохих позиций: просто нет одной позиции, которая была бы хороша во всех случаях.
 – 
James Coyle
5 Фев 2020 в 13:10

Я твердо верю, что позиционирование полностью зависит от контекста. Я вижу три места, где вы могли бы реализовать поле поиска, которое имеет смысл в разных контекстах: вверху экрана; прямо над искомым контентом; или внизу экрана. Все три имеют разные варианты использования.

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

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

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

В заключение, при реализации поля поиска вы должны:

  • Подумайте о том, чтобы скрыть его за значком, если это не основная функция.
  • Сохраните его вместе с фильтруемым содержимым, если оно используется для фильтрации.
  • Сделайте его основным элементом пользовательского интерфейса и легкодоступным со всех страниц, если он используется для навигации.
  • Держите его вверху, если вам нужны другие элементы внизу, такие как плавающие кнопки действий или нижняя навигация.
  • Всегда показывать результаты под полем.
1
James Coyle 5 Фев 2020 в 13:08