Это третья часть переведённых заметок «Good User Interface». Первые 16 частей уже ранее перевели наши коллеги из ADV на Хабре, а вторые 11 перевели мы.

Идея 28


Используйте варианты по-умолчанию, не заставляя людей выбирать

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

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

Итак: пользовательский интерфейс…. Что же это такое? Думаю, немаловажная составляющая успешного продукта. Именно то, насколько пользователям будет комфортно работать с тем или иным приложением, определяет дальнейшую судьбу, собственно, приложения и, вероятно, финансового (или не финансового) состояния разработчика.

За последние несколько лет мы стали свидетелями быстрого перехода от 3-D и скевоморфизма к плоским формам и минимализму в сферах разработки программного обеспечения и дизайна интерфейсов приложений. Хотя эта тенденция стала практически повсеместной, давайте немного задумаемся о том, как мы пришли к ней и какое влияние она оказывает на дизайн интерфейсов в целом. Кроме того, я поделюсь некоторыми советами и соображения по созданию плоских интерфейсов.


Интерфейсы на Windows Phone 8 и Apple ios 7

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

Здравствуй, дорогое хабросообщество! Пару дней назад ночью меня посетила одна очень интересная мысль, а именно: как сделать интернет доступнее для слабовидящих и людей, страдающих нарушением цветовосприятия (дальтоников). О том, как можем помочь им Мы (разработчики, дизайнеры, UI/UX специалисты) и создатели браузеров, можно узнать под катом. Так, возможно, выглядит Хабрахабр для некоторых из нас.



А как видишь Хабрахабр ты, {userName}?

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

Основы

Начнем с простого: рассмотрим обычный hex-код, где каждая из трех пар цифр контролирует один из цветов RGB — красный, зеленый, синий. Числа могут принимать значения цифр от 0 до 9 и букв от A до F.

Первое впечатление — это все. Пословица «По одежке встречают, по уму провожают» актуальна не только в жизни, но и в дизайне. Впечатление от дизайна состоит из множества факторов, и один из важнейших — это цвет.

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

Основные цвета (Primary Colors)

Основные цвета палитры — красный, желтый и синий. Если говорить об основных цветах на экранах различных устройств — это RGB, красный, зеленый и синий.

Вольный перевод статьи Якуба Линовски — «A Good User Interface».

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

12 апреля в Москве прошел Dribbble Meetup 2013. На этой неформальной конференции для дизайнеров выступили два десятка сильных и интересных специалистов, представленных в одной из главных тематических социальных сетей Dribbble. Это Евгений Беляев (Mail.Ru Group), Николай Верин, Павел Грозян и Дмитрий Новиков (MacPaw), Фил Дунский, Дмитрий Зимин (Киноход, экс-Рамблер), Алексей Кандауров и Александр Киров (Mail.Ru Group), Мысмаксом, Павел Прошин (Gipis), Дмитрий Чута, Вадим Щербаков, Алишер Якупов (Одноклассники), Юра Ярохович, а также внеплановые Александр Хмелевский и Дмитрий Цозик (SoftFacade), Денис Пахалюк (Ramotion) и Игорь Степахин (TracksFlow). Было много практически полезных рассказов и историй из жизни компаний с живым и веселым диалогом со слушателями.

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

Создание интерфейсов в проектировании больших сайтов – это самый объемный и один из самых важных этапов. Поэтому я отдельно решил выделить принципы и законы проектирования интерфейсов.

• Принцип KISS. От англ. «keep it short and simple». Интерфейс должен быть простой и понятный, задачи должны решаться минимальным числом действий, все должно быть понятно и очевидно.
• Не заставляйте думать. Нужно избегать сложных действий, которые заставляют пользователей думать.
• Убираем очевидное. Не стоит показывать очевидные элементы интерфейса, нужно сосредоточиться только на действительно необходимых вещах.
• Соотношение сигнал / шум. В каждом интерфейсе есть важные элементы (сигналы) и маловажные или даже бессмысленные для определенной части системы (шум), естественно, нужно концентрироваться на сигналах и избегать шума.
• Проверенное лучше модного. Не стоит цепляться за моду и делать что-то только потому, что так делают другие, лучше отдать предпочтение проверенным элементам интерфейса.

Кто-то вчера шутил, а кто-то занимался реально полезными вещами. Как например болгарский разработчик Мартин Ангелов, опубликовавший впечатляющий обзор JS библиотек:
http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/
Настоятельно рекомендуется к обозрению.
PS Куда-то пропал тип топика «Ссылка» :(

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



Перед вами 8 ситуаций, в которых будут участвовать web-дизайнер — Дмитрий, работающий в программе Photoshop, и верстальщик — Владимир. Эти два парня знают свое дело, но у них постоянно возникают конфликты, а иногда у одного из них возникает странное желание ударить другого монитором по голове. Впрочем, все мы цивилизованные люди и допустить такой развязки не можем. А потому сейчас мы разберемся в некоторых причинах конфликта этих двух бесценных специалистов.

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

Один из упоминаемых в статье интерфейсов

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

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

Бен Кэменс обнаружил, что в выпадающем списке Shop by Department на сайте «Амазон» ховер-эффект происходит очень быстро, абсолютно без какой-либо задержки. Тем самым происходит нарушение старого, выработанного ещё в 90-х годах прошлого века правила: перед отображением пункта подменю необходим так называемый гистерезис, запаздывание.



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

Компания Designmodo, специализирующаяся на разработке веб-интерфейсов, опубликовала на Гитхабе довольно внушительный набор модных сегодня плоских элементов интерфейса — меню, кнопок, слайдеров, переключателей, чекбоксов, иконок и многого другого. Плоский дизайн интерфейсов активно продвигает Microsoft, и он всё чаще и чаще встречается в сети.

Можно спорить о преимуществах и недостатках такого дизайна, но игнорировать его нельзя — мода есть мода, так что этому набору наверняка найдётся место в колллекции большинства веб-дизайнеров. Кроме файлов изображений и стилей, набор включает шрифт Lato польского дизайнера Лукаша Джеджича и подобранные дизайнерами образцы цветовых сочетаний. Демо Flat-UI можно посмотреть здесь.

UPD: в данный момент доступ к репозиторию Flat UI закрыт по требованию компании LayerVault, которая считает, что Designmodo нарушила её авторские права. В Designmodo отрицают какое-либо заимствование и утверждают, что Flat UI — полностью оригинальная разработка.