Дизайн с трудными данными · A List Apart Article

Вас попросили создать экран профиля для мобильного или веб-приложения. Он должен будет включать аватар, имя, название задания и местоположение. Вы запускаете Sketch или Figma. Возможно, вы вытаскиваете свой карандаш для рисования или направляетесь прямо к разметке и CSS.

Каково ваше поддельное имя?

Статья продолжается

Независимо от вашего выбора в инструментах, вы, вероятно, в конечном итоге получите некоторые данные заполнитель. Вы тот тип, который использует ваше собственное имя, или вы вызываете своего старого друга, . Lorem Ipsum ? Возможно, у вас есть поддельное имя, например Sophia J. Placeholder .

Для меня это Nuno Bettencourt . Или Нуну Дуарте Гил Мендес Беттенкур более формально. Nuno играл на гитаре в тонко названной группе ранних 90-х Extreme. Для младшего среди вас он был гастролирующим музыкантом с Рианной. Ничто из этого не имеет для наших целей здесь сегодня, за исключением того, что у него довольно длинное имя.

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

Может возникнуть несколько очевидных решений: используйте имя long placeholder; используйте реальные данные в своем дизайне. Хотя это хорошее начало, стоит еще глубже изучить, как эти и другие методы могут улучшить ваш процесс проектирования и помочь создать более прочные продукты.

Это больше, чем просто поддельные имена

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

Неспособность иметь дело с длинными строками текста — это самый простой и, возможно, самый распространенный способ, с помощью которого компоненты могут выйти из строя при контакте с реальными данными. Вы думали, что вкладка будет помечена как «Настройки»? Ну, теперь это называется «Прикладные настройки». О, и продукт запускается завтра.

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

Фотографии профиля учетной записи

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

Миниатюры для видео и фотографий

]

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

Дикие вариации в количествах

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

Отсутствующие элементы

Вы можете создать приятный макет для заголовка вашего сайта, который прекрасно масштабируется с вашего телефона на ваш 27-дюймовый дисплей. Затем вы обнаружите, что ему нужен элемент меню поддержки, но нет места! Я часто запускаю каркас, компилируя два списка. Первый содержит цели, которые должен выполнить посетитель на этом экране. У второго есть элементы, которые должны жить на этом экране. Обязательно включите все элементы — от основного контента до рекламных объявлений и до ссылки конфиденциальности в нижнем колонтитуле. Особенно легко обнаружить сайт, который был разработан без учета рекламных объявлений, которые он включает.

Размеры видового экрана

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

Гибкая конструкция может быть более доступной конструкцией

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

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

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

Избегайте разочаровывающего раскрытия

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

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

Когда я был ребенком, я отчетливо помню, как продавец вакуума от двери до двери прыгал на пылесос, чтобы продемонстрировать долговечность своего продукта. Нам не нужен новый вакуум (непосредственный изъян во всей модели от двери до двери), но изображение застряло со мной. Перейти на ваши проекты! Бросьте их к стене! Заполните их мусором и покажите, насколько хорошо они задерживаются.

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

Мусор внутри, золото?

Старая пословица по компьютерной науке гласит: «мусор, мусор». Вместо этого старайтесь «мусор, хм … неплохо». Лучше сказать, что можно опираться на закон Постела также известный как принцип надежности : «Будьте консервативны в том, что вы делаете, будьте либеральны в том, что вы принимаете от других». Если вы представляете, что ваш злой близнец пытается разобрать ваш дизайн, как бы они нарушили его? Может быть, хлюпает браузер до узкого размера и вводит некоторые необычно длинные заголовки (мусор). Ваш дизайн должен хорошо реагировать на узкую ширину и изящно уменьшить размер шрифта особенно длинных заголовков (золото).

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

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

Реальные данные недостаточно хороши

Много написано о преимуществах проектирования с использованием реальных данных. Мой коллега Даниэль Бурка пишет:

Старайтесь не заслонять сложность. Проектные работы в реальном мире довольно сложны. Если вы создаете фальшивый график, поставьте реалистичные данные. Если вы подделываете редизайн сайта, … не просто волшебным образом удалите рекламный блок. Если вы создаете сексуальный поддельный экран входа в систему, не забудьте включить способ восстановления потерянных паролей или имен пользователей. … Напишите настоящую копию. Lorem ipsum для любителей.

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

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

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

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

Иногда сложные данные могут (и должны) быть исправлены

Хотя ваш дизайн должен быть настолько прочным, насколько это возможно, вы иногда можете приступать к краям, которые не должны быть такими. При разработке страницы списка с клиентом мы просмотрели полный архив данных, чтобы узнать, как изменилась длина названий элементов. Самый короткий титул был 8 символов, а самый длинный был более 320, но только горстка была более 80.

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

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

Интернационализация

У меня была привилегия работать с командами в Mozilla, где страницы были переведены на восемьдесят языков. С такими широкими усилиями по локализации мы научились создавать макеты страниц и проекты, которые поддерживали как нелатинские наборы символов, так и языки с направлением текста справа налево.

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

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

Капитализация также может быть проблематичной в некоторых локалях, особенно при принуждении к CSS. Если ваш дизайн действительно полагается на text-transform: uppercase или text-transform: lowercase либо пересмотреть дизайн, чтобы быть более гибким, либо обрабатывать капитализацию в исходном тексте (а не через CSS), поэтому команда локализации может поддерживать контроль над капитализацией.

MDN — отличный ресурс для более подробного проектирования для локализации.

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

По возможности, дизайн с трудный данные

Многое было написано (и должно быть прочитано) о том, как наши инструменты могут помочь нам разрабатывать реальные данные. Благодаря современным средствам проектирования и прототипирования, прототипам HTML / CSS / JS и даже статическим макетам мы обманываем самих себя, если мы не подталкиваем наши конструкции к пределу.

Всегда есть баланс, чтобы нанести удар между тем, чтобы сделать что-то быстрое и чрезмерное. Как и все в дизайне и в Интернете, это зависит от . Это зависит от данных, аудитории, проекта и целей.

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

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

Получите наши последние статьи в своем почтовом ящике. Подпишитесь на оповещения по электронной почте.