При обучении веб-дизайну, имеется два правила, каковые, согласно нашей точке зрения, являются крайне важными, и их направляться запомнить.
Первое – все прямоугольной формы
Это правило оказывает помощь думать обо всех вещах, как о прямоугольниках. Заберите любую веб-страницу, и Вы имеете возможность срочно визуализировать сетку, а после этого наполнить ее содержанием и искать прямоугольники. Данный принцип оказывает помощь осознавать и проектировать лучше.
Второй принцип требует некоего дискуссии.
Примеры логинов в баре приложения
Демонстрация логина в панели приложения веб- и мобильных приложений, достаточно занимательная для анализа неприятность. Фронтенд команды-создатели самых больших и популярных приложений забрали ее на себя – довольно часто с полностью различными подходами.
Ясно, что размеры экрана диктуют то, как логин обязан размещаться на экране. Эта неприятность, разумеется, стоит особенно остро для устройств малых размеров.
Но, мы знаем, что размеры логина смогут очень сильно варьироваться. Начиная от одной единственной буквы, до достаточно долгих, амбициозных творений.
Имеется множество ответов данной неприятности. Давайте взглянуть на то, как кое-какие знаменитости с ней справляются.
Мы решили начать с Facebook, потому, что логин, для этого приложения, есть центральным компонентом. Вряд ли мы знали бы фамилии кроме того половины друзей, если бы не Facebook. Для приложения, которое было основано на идее применять Ваше настоящее полное имя, весьма интересно, что оно показывает лишь имя (без фамилии) в баре приложения.
Обстоятельством могла быть персонализация. Обращение по имени делает коммуникацию более близкой. Это еще и комфортно, по причине того, что не практично применять имена вместе с фамилиями, каковые время от времени бывают весьма долгими.
Вот как Facebook решает эту проблему:
- Они показывают имена лишь на дескстоп экране.
- Они не показывают имена пользователя на экране мобильного устройства, но показывают полное имя пользователя в параметрах настройки.
- Они смогут продемонстрировать достаточно долгое имя на рабочем столе (24 символа, 175 макс. ширина на экране 1366 пкс)
Medium
Первые мысли, в то время, когда дело доходит до сокращения имени – где еще имя пользователя так принципиально важно, что не может быть сокращено? Само собой разумеется, в публицистике.
Все статьи – эта работа автора, и его имя так же принципиально важно, как и содержание статьи. Нам стало весьма интересно, как популярное издание справляется с этим.
Оказывается, Medium использует достаточно занимательный подход.
- В верхней части бара, с правой стороны имена пользователя не употребляются по большому счету. Лишь аватар. Это то, что Вы увидели бы, в случае если просматривали статью.
- Но при написании статьи аватар продемонстрирован в баре приложения два раза. Слева, кроме этого, добавлено имя пользователя.
- Именам пользователя тут дают в полной мере достаточное пространство. Хватит места кроме того самым долгим.
- На экранах меньших размеров уделяется первостепенное значение логину, а другая часть пунктов меню принесена в жертву.
OneDrive
Мы, кроме этого, разглядели OneDrive, потому, что они достаточно весьма интересно подошли к делу. Кроме того, что мы видим полное имя пользователя, но еще и вправду необыкновенный метод его применения.
OneDrive упрощает полное имя пользователя на широких экранах. Так, имена смогут быть вправду долгими и занимать большое количество пространства.
На мобильных устройствах, целый бар приложения делается минимальных размеров, включая опции и эмблему меню.
Но самое весьма интересно произошло тогда, в то время, когда мы решили сделать супер долгое имя пользователя, дабы взглянуть, что случится. Совокупность справилась с заданием, скрыв опции меню, дабы дать место для имени пользователя.
В нижней части ответственные избирательные части меню как загрузка и создание скрыты за троеточием.
Другие решения
Не показывать имя пользователя, есть главным выбором среди большинства вторых сайтов. Для чего тратить энергию впустую, стараясь решить эту проблему, в случае если люди уже привыкли к аватару.
Помимо этого, что мы будем делать, в то время, когда экраны станут меньше? Мобильники, часы, очки. Изменяющаяся разработка придумывает новые увлекательные неприятности и такие же занимательные ответы.
К сожалению, в реальности нет никаких Jenny либо Mike.
Ted.com решил продемонстрировать пользовательские инициалы в баре приложения. Это необыкновенный подход, и нужно признать, что нам потребовалось некое время, дабы узнать, что, практически, это были отечественные инициалы. Это пример того, как мало людей определят в реальности собственные инициалы, по причине того, что употребляется ими весьма редко.
Кое-какие сайты показывают только аватар либо иконку. Но, кликнув на нее, возможно заметить полное имя пользователя в выпадающем окне. Долгие имена пользователей и тут станут проблемой.
Кто-то решает проблему, устанавливая лимит на количество знаков при регистрации имени пользователя. Disqus сделал это, перед тем как обновятся новые UI. Вот итог, что был дан, в то время, когда мы попытались ввести долгое имя.
Убедитесь, что введенное Вами значение не превышает 30 знаков.
Выглядит хорошо для разработчика и общей работы дизайнера. Давайте введем имя с максимальными числом знаков и посмотрим, как это в будущем обернется для дизайна.
Прекрасно для баз данных – да. Прекрасно для дизайна и полного UX? Скорее нет.
Что за имя, спросите Вы
Посредством маленького опроса, мы выяснили, что думают пользователи о собственных именах в баре приложения. Большая часть не тревожило присутствие имени пользователя на кнопке, которая может привести к учетной записи.
Кроме этого, мы заключили, что долгими именами считаются Елизавета и Александр. Само собой разумеется, имеется и другие имена, но они не превышают это количество букв.
Но, кроме этого, мы выяснили, что люди с долгими именами легко придумывают для себя сокращенные варианты. С этим неприятностей нет.
Но сокращения касаются не только имен.
Как Вы размещаете числа, не разламывая дизайн?
Лейаут, спроектированный для трехзначных чисел не имел возможности бы трудиться, в то время, когда числа становятся шестизначными. Facebook и Twitter справляется с той проблемой методом усечения чисел, додавая k и m.
Второй урок
Это приводит нас к второму уроку, что мы вычисляем серьёзным в веб-дизайне – Контент vs Презентация.
Упомянутые выше неприятности проектирования появляются, в то время, когда контент и презентация идут рука об руку. Прекрасные проекты с равными свежими именами и колонками высоты пользователя имеют тенденцию портить настоящую обстановку. Это оказывает помощь трудиться с фактическими данными вместо того, дабы везде применять ‘lipsum .
Это, само собой разумеется, не есть проблемой, только, сети. Эти же неприятности столетиями сопровождают газеты, в то время, когда заголовки должны были быть подобраны исходя из пространства, продиктованного размещением колонки.
Технические требования, такие как области CSS нацелены на то, дабы оказать помощь отделять размещение от содержания. Это может подойти для некоторых случаев применения, таких как повествование разных историй. Но, это не будет трудиться в других обстановках.
Контекст – это все.
Имена имеют тенденцию становиться более ответственными в определенных контекстах, к примеру, как обсуждения и системы публикации. Сеть внедряется в экосистему, которая включает в себя широкий диапазон устройств малого размера. Проектировщики должны учесть важность данной информация, независимо от того как тривиальной она думается в данном контексте.
А какие конкретно долгие логины Вы встречали? И как Вы решали проблему сокращения имени пользователя? Поделитесь с нами Вашим опытом в комментариях!
Случайные статьи:
Примеры UX/UI дизайна от Forty
Подборка похожих статей:
-
10 Примеров эффективных кампаний по повторному вовлечению подписчиков
Известно ли вам, что каждый год перечни email-рассылок становятся меньше на 25%? Кроме того в случае если адресаты вашей рассылки формально сохраняют…
-
7 Примеров нестандартного использования технологии ibeacon
Обычно понятие «биконов» ассоциируется у людей с ритейл-индустрией. Воображение сходу рисует торговые комплексы, клиентов с сотовыми телефонами и…
-
8 Замечательных примеров мобильного дизайна
Изучения говорят о том, что 91% мобильных пользователей держат собственные устройства под рукой 24/7, соответственно, у каждого бренда имеется хорошая…
-
«Микро-моменты» и их роль в пользовательском взаимодействии
Появление мобильных устройств в корне поменяло процесс продаж. Современные клиенты имеют мгновенный доступ к любой информации либо действию — это…