Фото: Дж. Д. Хэнкок
Когда я учусь дизайну для веба, я считаю, что мне очень дороги и важны два урока.
Первый — все прямоугольник .
Это помогает думать обо всем как о прямоугольниках. Возьмите любую веб-страницу, и вы можете мгновенно визуализировать сетку, если вы можете размывать содержимое и искать прямоугольники. Этот принцип помог мне лучше понять и разработать веб-дизайн.
Другой принцип требует обсуждения в первую очередь.
Шаблон имени в панели приложения
Отображение имени пользователя на панели приложений в веб-приложениях и в мобильных приложениях — распространенная и интересная проблема для анализа. Передовые команды из многих крупнейших веб-приложений приняли его — часто с совершенно разными подходами.
Ясно, что размеры экрана диктуют, что имя пользователя занимает конечное количество экрана. Эта проблема явно подчеркивается в устройствах меньших размеров.
Однако мы также знаем, что длина имени пользователя может сильно отличаться. Возможно, из одного письма — «М» или «Q» Джеймса Бонда когда-либо пользовались Facebook? — до гораздо более длинных, более амбициозных творений .
Есть множество решений этой проблемы. Давайте посмотрим, как некоторые из громких имен решают эту проблему.
Я решил начать с Facebook, так как имя пользователя является центральным компонентом этого приложения. Я сомневаюсь, что знаю фамилии многих моих друзей, если бы не Facebook. Для приложения, основанного на фундаментальной идее использования вашего настоящего полного имени, весьма интересно, что оно отображает только имя пользователя на панели приложения.
Намерением может быть персонализация. Обращение кого-то по имени делает общение более личным. Это также удобно, потому что это пространство может быть непрактичным для длинных имен пользователей.
Вот как Facebook решает эту проблему:
- Они отображают имена только на главном экране рабочего стола, что странно
- Они не отображают имена пользователей на мобильном экране, но отображают полное имя пользователя на экране настроек
- Может отображать довольно длинное имя на рабочем столе (24 символа, максимальная ширина 175 на моем экране 1366 пикселей)
средний
Моя непосредственная мысль, когда дело доходит до усечения имен пользователей, была, где еще имя пользователя настолько важно, что его нельзя урезать ? Издательство, конечно.
Все статьи являются авторскими работами, а их имена так же важны, как и сам контент. Это ядро приложения, и я продолжил исследовать, как все более популярное издательство (подмигивание) будет справляться с этим сценарием.
Оказывается, Medium справляется с этим довольно интересно.
- В правом верхнем углу панели приложения имена пользователей вообще не используются. Просто аватар. Это то, что вы заметили бы, читая контент.
- Но при написании статьи аватар дважды отображается на панели приложения. Слева, это также включает в себя имя пользователя.
- Имена пользователей здесь имеют достаточно места и могут быть безумно длинными.
- На экранах меньшего размера имя пользователя имеет приоритет, а остальные пункты меню отключаются.
Один диск
Я также взглянул на OneDrive, потому что они справляются с этим удивительным образом. Он не только отображает полное имя пользователя, но и действительно хорошо обрабатывает необычные сценарии использования.
OneDrive обеспечивает полное имя пользователя на широких экранах. На самом деле, имена могут быть очень длинными и иметь много места.
На мобильном телефоне вся панель приложения становится минимальной, включая логотип и опции меню.
Но сюрприз был, когда я намеренно сделал имя пользователя очень длинным, чтобы посмотреть, что произошло. Он хитро ответил, скрыв пункты меню, чтобы освободить место для имени пользователя.
С другой стороны, важные пункты меню, такие как « создать» и « загрузить» , скрыты за эллипсами, так как для них предусмотрено сверхдлинное имя пользователя. Хотя это крайний случай, и я в восторге от решения, я не могу не понять, почему это решение было принято.
Другие решения
Не отображать имя пользователя было лучшим выбором среди большинства других сайтов. Зачем тратить энергию, пытаясь решить эту проблему, когда люди уже привыкли действовать только на аватаре.
Кроме того, что вы делаете, когда экраны становятся меньше? Мобильные, часы, очки. Носимая технология создаст несколько интересных проблем с не менее интересными решениями.
К сожалению, в реальном мире не все являются Дженни или Майком.
Ted.com выбирает отображение пользовательских инициалов в панели приложения. Это необычный подход, и я должен признать, что мне потребовалось некоторое время, чтобы понять, что они на самом деле были моими инициалами — шаблон, который мало кто даже узнает в реальном мире, потому что он используется так редко.
Некоторые веб-сайты предпочитают просто отображать аватар или значок. Но при нажатии на них они все равно отображают имя пользователя полностью в раскрывающемся списке. Более длинные имена пользователей также являются проблемой в этом подходе.
Другие сайты обрабатывают это, ограничивая длину имени пользователя на самой странице регистрации. Disqus сделал это до своего последнего обновления пользовательского интерфейса. Вот результат проверки формы, который был получен, когда я попробовал длинное имя.
Убедитесь, что это значение содержит не более 30 символов (оно имеет 50).
Это похоже на отличный пример использования для сотрудничества дизайнеров и разработчиков. Давайте определимся с максимальной длиной имен пользователей и разработаем все дальнейшие проектные решения, основанные на этих знаниях.
Хорошо для баз данных, да. Хорошо для дизайна и общего UX? Возможно, нет.
Вы спрашиваете, что в имени?
Я провел предварительное (неофициальное) исследование, чтобы выяснить, что реальные пользователи думают об их именах в панели приложений. Большинство не было обеспокоено наличием имен пользователей в кнопке, которая запускает настройки учетной записи.
Я также провел некоторое исследование относительно того, что можно считать достаточно длинным именем пользователя для предположения. Большая часть моего социального графа придумала не что иное, как Александра или Элизабет.
Я также случайно узнал, что люди с длинными именами привыкли к тому, что их усекают. Там нет проблем.
Это не означает, что нет проблем, когда текст непреднамеренно обрезается. Например, когда вы покупаете ‘ Land O Lakes Butter ‘ в продуктовом магазине, и это происходит.
«Land o Lakes Butter» получает неудачное сокращение в некоторых кассовых аппаратах. Источник
Но усечение выходит за рамки имен пользователей.
Как вы приспосабливаете номера, не нарушая дизайн? Раскладка, предназначенная для трехзначных чисел, может не работать, если число становится шестизначным. Facebook и Twitter решают эти проблемы, обрезая числа до k и m.
Другой урок
Это подводит меня ко второму уроку, который я считаю очень ценным при разработке для веб-сайтов — «Контент против презентаций».
Вышеупомянутые проблемы дизайна возникают, когда презентация и контент идут рука об руку. Красивые дизайны с одинаковыми по высоте колонками и четкими именами пользователей имеют тенденцию ломаться в реальных жизненных ситуациях. Это помогает работать с фактической выборкой данных, а не везде использовать ‘lipsum’.
Это, конечно, не проблема, которая является исключительной для Интернета. Это было с тех пор, как появились газеты, когда заголовки нужно было настраивать в соответствии с пространством, заданным в колонке.
Такие спецификации, как области CSS, направлены на то, чтобы помочь отделить макет от контента. Это может быть хорошо для некоторых случаев использования, таких как рассказывание историй. Однако это может не сработать в других ситуациях.
Контекст это все.
Имена, как правило, становятся более важными в определенных контекстах, таких как системы публикации и обсуждения. Сеть превращается в экосистему, которая включает в себя широкий спектр небольших устройств. Дизайнеры должны учитывать, важна ли конкретная часть информации, какой бы простой она ни была, в данном контексте или нет.
В этой дискуссии я хотел бы узнать, с какими самыми длинными именами пользователей вы столкнулись и как вы решили решить проблему с именем пользователя на панели приложения.