СоХабр закрыт.

С 13.05.2019 изменения постов больше не отслеживаются, и новые посты не сохраняются.

| сохранено

H Детали в пользовательских интерфейсах в черновиках

  1. Отсутствие бесконечного скроллинга на поисковых результатах в поисковиках
  2. Расположение иконок приложений на смартфонах
  3. Расположение директорий в операционных системах
  4. Горизонтальное расположение вкладок в браузерах
  5. Checkbox на iPhone
  6. Поиск по приложениям в смартфоне
  7. Менюбар на macOS
  8. Представление результатов поиска на youtube
  9. Переключение разрешения видео на youtube
  10. Навигационные клавиши на MacBook
  11. Отсутствие горячих клавиш в google
  12. Сообщения вконтакте открываются отдельной страницей
  13. Модальные диалоги на facebook не закрываются при клике по backdrop
  14. Горячие клавиши в twitter
  15. Строка поиска на google прикреплена к верхней панели
  16. Доступ к сервисам гугла спрятан за кнопкой
  17. Запросы на обновления
  18. Неудобные кнопки закрытия окна на MacOS
  19. Поиск по странице в Chrome не ищет учитывая синтаксические ошибки
  20. Представление списка писем в Gmail
  21. Невозможность удалять стандартные приложения на смартфонах
  22. Комментарии на youtube
  23. Приложения из веб-страниц
  24. Сворачивание Skype при клике на крестик
  25. И так далее...
image
За последние 6 лет, которые я занимаюсь программированием, я превратился в настоящего нерда. Мне нравится ковыряться в своем смартфоне, искать новые и новые приложения, которые мне позволяют выполнять существующие задачи еще эффективнее. И самое главное на что я смотрю при выборе очередного приложения, или при регистрации на новом сайте — это на то, насколько на этом сайте проработаны детали интерфейса. Интерфейс продукта — это собственно и есть сам продукт, он должен быть максимально понятным, простым и интуитивным. Со стороны проектирование интерфейсов может показаться простым, типа что там вообще сложного, обрисовываешь проблему, размещаешь кнопки там, где надо, показываешь список сущностей, делаешь поиск и передаешь это программистам на реализацию. Но в действительности все программисты знакомы с тем, что требования меняются по мере развития продукта. А вся суть заключается в том, что проектирование удобных интерфейсов — это далеко не настолько простая и легкая задача, как может показаться на первый взгляд. И одним из постулатов проектирования интерфейсов я считаю убеждение «Хороший интерфейс складывается из большого количества деталей». И в этой статье я хочу указать на определенные детали в популярных сервисах, которые можно было бы реализовать лучше.

Отсутствие бесконечного скроллинга на поисковых результатах в поисковиках

Такое поведение можно наблюдать как в гугле так и в Яндексе. Вместо бесконечного скроллинга (как например в твитере или вконтакте) используется пагинация. Но недостаток пагинации заключается в том, что он требует от пользователя дополнительного клика (как много из вас заходят на вторую страницу поиска?). Если сделать бесконечный скроллинг, то можно увеличить вероятность того, что пользователь будет смотреть результаты, которые бы в противном случае он не посмотрел бы из-за необходимости сделать дополнительный клик. И соответственно пользователь смог бы немного быстрее и лучше удовлетворить ту потребность с которой он пришел в поисковик.

Расположение иконок приложений на смартфонах

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

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

В качестве правильного примера расположений иконок на том же самом iPhone можно зайти в настройки, где иконки расположены вот так:

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

Расположение директорий в операционных системах

Вместо того, что бы группировать файлы по их предназначению (файлы конфигураций в /etc, с правка в /man, и т.д.) было бы значительно удобнее если бы каждое приложение создавало свою директорию в корневой директории операционной системы и держало бы все свои файлы только в этой одной директории. Я например постоянно гуглю где именно находится какой-либо конфигурационный файл, где именно расположен исполнительный файл и т.д. Но если бы все было расположено в одной директории, то я бы просто мог по-быстрому пробежаться по всем файлам только в этой и найти нужный без гугления. И к тому же тогда удаление какой-либо директории полностью бы стирало все файлы приложения. Да в принципе много плюсов у такого подхода можно найти.

Горизонтальное расположение вкладок в браузерах

Возможно в определенных случаях горизонтальное расположение вкладок и имеет смысл, например если пользователь открывает только пару вкладок, либо если у него узкий монитор. Но для таких пользователей можно было бы создать дополнительную настройку в браузере на переключение на вкладки в горизонтальные вкладки. У горизонтального расположения намного больше минусов, чем плюсов:
— Так же как в случае с иконками на iPhone визуальный поиск становится значительно медленнее, чем если бы иконки располагались в столбик.
— Не достаточно места, что бы впихнуть title.
— Намного меньшее количество вкладок можно открыть одновременно, без ущерба для отображения.
— Невозможно отображать иерархию открытых вкладок вкладок. Я например очень часто гуглю что-нибудь и открываю несколько вкладок из гугла, и было бы удобно что бы все открытые вкладки отображались бы дочерними к родительской вкладке с поисковыми результатами. И тогда можно было бы закрыть родительскую вкладку, и это бы закрывало все дочерние вкладки.

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

Checkbox на iPhone

На iPhone чебоксы сейчас выглядят так:

Но для меня намного интуитивнее выглядят обычные чекбоксы с галочкой. Да и из реального мира это переносится удобнее — галочка есть, значит стоит true, если нету — то false.

Поиск по приложениям в смартфоне

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

Менюбар на macOS

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

Представление результатов поиска на youtube

Я вообще являюсь фанатом табличного отображения данных. Таким форматом можно намного лаконичнее в определенных ситуациях представлять данные. И поисковые результаты youtube — это очень и очень хороший пример такой ситуации. Вот как бы я реализовал отображение результатов в табличном формате:
— Создать колонки для: названия видео, количества лайков, количества дизлайков, продолжительности, дате загрузки, разрешении, названия канала.
— Добавить возможность сортировки по клику по каждому заголовку колонки
— Добавить возможность фильтрации по каждой колонке (например показывать только видео за последнюю неделю, только с количеством просмотров больше 1 000 000).
И это было бы не просто немного удобнее, это бы вывело юзабилити ютюба на совершенно другой уровень!

Переключение разрешения видео на youtube

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

Навигационные клавиши на MacBook

Для тех кто не знает, вот как они выглядят на макбуке:

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

Отсутствие горячих клавиш в google

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

Сообщения вконтакте открываются отдельной страницей

У меня очень часто происходит ситуация, когда я пролистал ленту вконтакте уже достаточно глубоко и тут мне приходит сообщение, я нажимаю на сообщения, и теряется текущая позиция скроллинга. Что бы этого избежать можно было бы реализовать сообщения в модальном диалоге. Я, кстати, так же являюсь фанатом модальных диалогов и считаю, что если что-то может быть реализовано в модальном диалоге, то это должно быть реализовано в модальном диалоге. Модальный диалог не сбрасывает существующий контекст взаимодействия и можно к этому контексту быстро вернуться закрыв модальный диалог. То есть создается как бы основной контекст взаимодействия — это страница, а все остальное реализовано модальными диалогами. Примерную реализацию такого поведения можно увидеть в играх типа Diablo, где основной контекст — это вид сверху, а если вы открываете инвентарь, или дерево умений, то они открываются поверх основного контекста, но не переводят на совершенно новый контекст.

Модальные диалоги на facebook не закрываются при клике по backdrop

Такое поведение встречается не только на facebook, но и на других сайтах, просто facebook — это самый популярный. Закрытие модальника на facebook возможно только при клике на крестик. Но по backdrop кликнуть намного удобнее по той причине, что он размерами намного больше, и по нему легче попасть. Клик по backdrop должен всегда закрывать модальник!

Горячие клавиши в twitter

Сейчас переключение по твитам реализовано через k и j (попробуйте угадать какая кнопка переводит вас на следующий твит, а какая на предыдущий), а не через стрелочки. Реализация через стрелочки была бы значительно более интуитивной и понятной, да и народ бы пользовался стрелочками намного активнее. Стрелочка вверх — выделить твит выше, стрелочка вниз — выделить твит ниже, просто ведь. А для клавиш k и j нету никаких запоминающихся мнемоник. Видимо разработчики твитера бездумно скопировали эти горячие клавиши из Vim, не учитывая что 99.9% их пользователей даже не знают, что такое Vim.

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

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

Доступ к сервисам гугла спрятан за кнопкой

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

Запросы на обновления

Каждый мой рабочий день начинается с того, что я закрываю несколько окон, которые просят у меня разрешения на обновления (особо упоротые разработчики, например как в windows 10, запрещают что-либо делать до тех пор, пока их программа не обновится). Идеальный способ обновления реализован в хроме — он обновляется, а при перезапуске запускается новая версия. И все это происходит без того, что бы меня хоть как-то беспокоить.

Неудобные кнопки закрытия окна на MacOS

Кнопки закрытия окна на Mac очень сильно проигрывают этим же кнопкам на windows. Вот как они выглядят на маке:

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

Поиск по странице в Chrome не ищет учитывая синтаксические ошибки

Поиск по странице — это крайне важный функционал, и я им пользуюсь по много раз на дню, и очень часто я делаю различные синтаксические ошибки. Но поиск в Chrome реализован прямолинейно и подсвечивает результаты только при 100% совпадении. Я во время гугления редко читаю страницу полностью, а сразу иду к определенным ключевым словам. И у гугла же уже реализован похожий функционал исправления опечаток при поиске. Можно ведь было либо как-то скопипастить код, либо позвать разработчиков, которые разработали коррекцию опечаток и попросить их реализовать такую же коррекцию в браузере.

Представление списка писем в Gmail

Я уже говорил о том, что я обожаю таблицы. Список писем это так же тот формат данных, который можно было бы очень лаконично представить таблицей. Например посмотрите насколько удобно список писем выглядит в Thunderbird:

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

Невозможность удалять стандартные приложения на смартфонах

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

Комментарии на youtube

Тут целый ворох проблем с комментариями на youtube:
— Отсутствует возможность создавать глубокие иерархии комментариев.
— Невозможно одновременно и смотреть видео и читать комментарии, само расположение комментариев не позволяет это сделать. Этот функционал реализован удобно на facebook / instagram, где фотграфия / видео отображается слева, а справа показывается список комментариев и соответственно можно почитывать комментарии в моменты, когда на видео не происходит ничего интересного.
— Комментарии подгружаются не сразу, а только при скроллинге.

Приложения из веб-страниц

На windows в Chrome была возможность создать приложение из веб-страницы. Не знаю есть ли такая возможность под Windows сейчас, но это было очень удобно, непонятно почему эту возможность не добавили под маком, и почему вообще эта функция спрятана. Очень удобно что бы определенные веб-сайты были открыты всегда. В этом случае отсутствуют стандартные элементы браузера, такие как адресная строка, вкладки, список закладок (а это очень тяжелые UI компоненты). Это подходит для приложений, которые открыты постоянно и которые не плодят вкладки (почта, мессенджер, карта). В этом случае до них можно добраться одним кликом с рабочего стола и нету необходимости держать их в браузере постоянно открытыми.

Сворачивание Skype при клике на крестик

Когда я нажимаю на крестик в Skype на Windows, то по умолчанию он не закрывается, а сворачивается. Я знаю, что это поведение можно изменить через настройки, но не было бы удобно, что бы по умолчанию он работал именно таким образом? То есть это же мать его КРЕСТИК. Семантически это означает закрытие приложения, а для сворачивания есть отдельная, предназначенная именно для этого кнопка. Видимо разработчики скайпа решили таким образом поднять популярность своего приложения, сделав его закрытие менее интуитивным.

И так далее...

И тому подобное…


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

комментарии (7)

+2
+3 –1
i360u ,   * (был изменён)

Детский сад, ну серьезно. Когда серьезные дяди выбирают какие-либо дизайн-решение, обычно учитывают большое количество всяких "за" и "против", а также данные кучи исследований. По каждому из ваших пунктов можно было бы объяснить почему сделано так, а не иначе. И даже если решение кажется спорным — оно обусловлено какими-то соображениями, которые в свое время перевесили свои "против". То, что лично вам кажется более удобным, совсем не значит, что оно таковым является даже для вас, не говоря уже об огромном количестве людей, с которым работают производители популярных программных продуктов. Например, на смартфонах люди обычно группируют приложения по экранам и таким образом ориентируются в них и ранжируют по частоте использования, а поэтому там уместен именно горизонтальный свайп, а не вертикальный скроллинг. Ну и так далее.

0
Skreep ,  
Не очень связная статья, простите.
–1
+1 –2
AHTOLLlKA ,   * (был изменён)
На iPhone чебоксы сейчас выглядят так:

Но для меня намного интуитивнее…

о боже, да всем насрать
0
Onito ,  
Вот не согласен с пунктом про расположение иконок приложений на айфоне, как вы предложили уже реализовано в винфоне и это ужасно — я не помню как точно называется приложение и в итоге вынужден скролить десятки приложений и так как иконка приложения значительно уменьшена и много место отдано названию то приходится при скролле читать названия всего что проматываешь а вот на андроиде и айос я таких проблем никогда не встречал
0
GennPen ,   * (был изменён)
По мне так свайп иконок по страницам на основном экране гораздо удобней, чем скролл. Так можно отделить группы: на первой странице основные часто использующиеся, на второй группа неких приложений, на третьей — игрушки и т.п.

И по поводу бесконечного скроллинга. Иногда он бесит, чтобы добраться до некого результата, который находится через несколько страниц — нужно кучу ненужной информации промотать.
0
dgepto ,  
Вы как то прыгаете из одного в другое, я думал расскажите на конкретном примере как было не удачно, как переработали и после этого стало лучше. А тут придирки к «неудобствам» с Вашей точки зрения.

Была у меня как то клавиатура еще в далеких школьных годах, где над стрелкой вверх была кнопка перевода компьютера в спящий режим, иногда во время гонки, пальцы промахивались, у меня бомбило как у Вас!

А еще ручки иногда над чайником сильно нагревается и его брать вообще невозможно.

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

Спасибо.
0
AlaXiZ ,  
Согласен со Skreep очень путанная статья. Автор не до конца определился что же ему нужно.
Кстати на Windows Phone список приложений вертикально пролистывается, да и сам «рабочий стол» сделан в виде вертикального списка плиток.