• Типографика
    • Перевод

    Обратите внимание на меню слева.

    Или посмотрите на заголовки списков. Между словом «PLAYLISTS» и его подчёркиванием расстояние в 15px. Это больше, чем высота заглавной буквы шрифта ! Я уже молчу о 25px между самим списками.

    В верхнем правом углу тоже достаточно пространства. Текст «Search all music» занимает 20 % высоты панели навигации. У иконок похожие пропорции.

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

    Или Википедия.

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

    Добавьте белое пространство между линиями.
    Добавьте белое пространство между элементами.
    Добавьте белое пространство между группами элементов.
    Анализируйте, что работает, а что нет .

    В следующей части я расскажу об остальных 4 правилах красивых интерфейсов:

    1. Как накладывать текст на картинки.
    2. Как выделять и утапливать текст.
    3. Используйте только хорошие шрифты.
    4. Крадите как художник

    Теги:

    • веб-дизайн
    • дизайн интерфейсов
    Добавить метки

    Инструкция

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

    Установите и запустите среду программирования. Откроется окно программы, в нем вы увидите серый прямоугольник. Это окно дизайнера форм, а проще заготовка интерфейса вашей будущей программы, она обозначена как Form1. Щелкнув на заголовке формы, вы можете в левой части программы, в окне инспектора объектов, задать ей нужное название. В данном случае вам надо будет вписать название программы в строку Caption.

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

    Расположите кнопку в нужном месте формы. Измените, при необходимости, ее размер. Теперь дайте кнопке название – например, Open. Для этого щелкните кнопку мышкой и в окне инспектора объектов введите в строку Caption название кнопки – Open.

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

    Существует ряд компонентов, которые вы часто будете использовать, то есть перетаскивать на форму, но которые не будут отображаться в окне готовой запущенной программы. Например, перетащите из вкладки Dialogs компоненты Open Dialog и Save Dialog. Расположите их где-нибудь в нижней части окна – так, чтобы они не мешали. С помощью этих компонентов мы сможете реализовать процедуру открытия файлов и их сохранения. Подобных компонентов много, вы будете часто их использовать.

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

    Мы говорили о правилах создания чистых и красивых интерфейсов.

    Вот эти правила:

    1. Свет падает сверху (Часть 1).
    2. Сначала черное и белое (Часть 1).
    3. Увеличьте белое пространство (Часть 1).
    4. Научитесь накладывать текст на изображения.
    5. Научитесь выделять и утапливать текст.
    6. Используйте только хорошие шрифты.
    7. Крадите как художник.

    Правило № 4: Научитесь накладывать текст на изображения

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

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

    Метод № 0: Наложение текста напрямую на фотографию

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

    Чёрный фильтр самый простой и универсальный, но вы также можете использовать и цветные фильтры.

    Метод № 2: Текст-на-фоне

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

    Концепт приложения для iPhone от Miguel Oliva Marquez

    Здесь также можно использовать цвет, но в пределах разумного.

    Концепт в розовом цвете от Mark Conlan

    Метод № 3: Размойте изображение

    Как ни странно, хороший способ сделать текст читабельным - это размыть часть картинки.

    В Snapguide размыта обширная часть картинки. Заметьте, что она также затемнена

    Такой способ стал особенно популярен после выхода iOS 7, хотя широко использовался ещё в Vista.

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

    Teehan + Lax

    Я имею в виду, просто попытайтесь прочесть подзаголовок внизу.

    Метод № 4: Затемните низ

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

    Случайному наблюдателю может показаться, что в коллекциях Medium белый текст нанесён напрямую на изображение. Но это не так! Здесь есть едва заметный градиент чёрного цвета с середины изображения к низу (с прозрачностью от 0 до примерно 20 %).

    Его не так просто заметить, но он определённо там есть, и это совершенно точно улучшает читаемость текста.

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

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

    Ещё один продвинутый способ: затемнение и размытие.

    Бонус - Метод маскировки

    Заголовок «Material Design» выделен множеством способов. Он большой, очень контрастный и выделен болдом.

    Текст в футере, наоборот, утоплен. Он маленький, неконтрастный и обычного начертания.

    А сейчас самое важное.

    Название страниц - это единственный элемент на сайте, который нужно только выделять. Остальные элементы нужно выделять и утапливать одновременно.

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

    Баланс визуальных стилей

    Сайт Blu Homes - пример безукоризненного дизайна. Там есть большой заголовок, но слово, на котором делается акцент, написано строчными буквами - слишком много выделений выглядело бы избыточно.

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

    Подписи под цифрами, несмотря на то что они серые и маленькие, набраны прописными буквами и более жирным шрифтом.

    Всё дело в балансе.

    Contents Magazine - хороший пример выделения и утапливания текста.

    • Название статей - это единственный элемент на странице, который набран не курсивом. В этом случае, именно отсутствие курсива привлекает внимание (особенно в комбинации с жирным начертанием).
    • Имя автора выделено болдом - в отличие от слова «by», набранного обычным шрифтом.
    • Маленькая, неконтрастная подпись «ALREADY OUT» никому не мешает. Но благодаря прописным буквам, щедрой разрядке и большим полям тут же привлекает внимание.

    Активные и выбранные элементы

    Выделение активных элементов - ещё более сложная задача.

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

    Что же тогда делать?

    Можно использовать:

    • цвет текста;
    • цвет фона;
    • тени;
    • подчёркивание;
    • небольшую анимацию (подъём, опускание и так далее).

    Вот один проверенный способ: попробуйте сделать белые элементы цветными или цветные элементы белыми, но затемнив при этом фон.

    Выбранная иконка стала белой, но сохранила контраст по отношению к фону

    Вывод такой: научиться выделять текст очень сложно. Каждый раз, когда у меня что-то не получалось, я понимал, что мне нужно стать лучше. А чтобы стать лучше, нужно пробовать.

    Правило № 6: Используйте только хорошие шрифты

    Внимание: в этом разделе вы не найдёте никаких секретов. Я просто перечислю несколько хороших бесплатных шрифтов, которые можно использовать.

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

    Так что скачайте их прямо сейчас для вашего следующего проекта.

    Все скаченные вами шрифты можно найти в приложении Шрифты во вкладке Пользователь.

    Ubuntu

    Ubuntu имеет множество начертаний. Для некоторых приложений он слишком специфичен, для других - подходит идеально. Можно скачать на Google Fonts .

    Open Sans

    Open Sans - популярный шрифт, легко читается. Хорошо подходит для основного текста. Можно скачать на Google Fonts .

    Bebas Neue

    Bebas Neue отлично подходит для заголовков. Состоит только из прописных букв. Можно скачать на сайте Fontfabric и там же посмотреть примеры использования.

    Montserrat

    Montserrat доступен только в двух начертаниях, но этого достаточно. Этот шрифт - лучшая бесплатная альтернатива Gotham и Proxima Nova, но он далеко не так хорош, как они. Можно скачать на Google Fonts .

    Raleway

    Raleway подходит для заголовков, возможно, немного чересчур для основного текста (эти «w»!). Очень красиво выглядит начертание Ultralight (нет на картинке). Можно скачать на Google Fonts .

    Cabin

    Lato

    PT Sans

    Entypo Social

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

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

    Но где же искать эти примеры? Вот несколько сайтов, которые оказались для меня самыми полезными. В порядке убывания.

    1. Dribbble

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

    Перевод статьи дизайнера Эрика Кеннеди “7 Rules for Creating Gorgeous UI”, которую он опубликовал в собственном блоге со списком из семи правил по созданию красивых .

    Расскажу о правилах создания красивых и чистых интерфейсов.

    Вот данные правила:

    1. Свет всегда падает сверху
    2. Сначала белое и черное
    3. Увеличьте белое пространство
    4. Научитесь накладывать на изображения текст
    5. Применяйте исключительно хорошие шрифты
    6. Крадите как художник

    Научитесь накладывать на картинку текст

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

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

    Наложение текста непосредственно на фото

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

    Otter Surfborads. Выглядит инстаграммно и по-хипстерски. Но текст читается трудновато

    В данном способе есть множество рисков и проблем:

    1. Фото должно быть темным и не очень контрастным.
    2. Текст должен иметь белый цвет. Найдите хороший противоположный пример. Хотя бы один.
    3. Проверьте его на каждом разрешении и экране, чтобы убедиться в том, что текст нормально читается.

    Понятно? Хорошо! Отныне никогда не меняйте фото и текст, и все будет отлично.

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

    Веб-сайт экспедиции Aquatilis. Вам следует обязательно посмотреть, если еще не видели

    Затемните все изображение

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

    Вот современное весьма красочное фото с затемнением.

    Сайт Upstart применяет 35-% чёрный фильтр

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

    Такой метод также превосходно работает для маленьких картинок.

    Черный фильтр является на сегодняшний день наиболее простым и универсальным, по правде, вы также можете применять цветные фильтры.

    Текст на фоне

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

    Концепт программы для iPhone от Miguel Oliva Marquez

    Здесь также можно применять цвет, однако в пределах разумного.

    Размойте картинку

    Хороший метод сделать текст более читаемым - размыть часть изображения.

    В Snapguide размыта большая часть изображения. Заметьте, что она затемнена

    Этот метод стал в особенности популярен сразу после выхода iOS 7, но широко применялся еще в Vista.

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

    В случае если изображение вдруг изменится, то убедитесь, что фон остался размытым.

    Просто прочитайте подзаголовок внизу.

    Затемните низ

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

    Случайному пользователю вполне может показаться, что в коллекциях Medium текст белого цвета нанесен напрямую на картинку. Но это совсем не так! Здесь есть чуть заметный черный градиент с середины картинки к низу (прозрачностью - от 0 до приблизительно 20 %).

    Его не просто заметить, но он там точно есть, и это очень улучшает читаемость всего текста.

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

    Почему картинку необходимо затемнять книзу? Ответ на данный вопрос читайте в Правиле № 1: свет всегда падает сверху. Для того, чтобы выглядеть наиболее натурально для человеческих глаз, картинка должна быть чуть темнее книзу, как и любой иной предмет, который мы видим.

    Еще один современный и продвинутый способ: размытие и затемнение.

    Бонус - Метод маскировки

    Почему в блоге Elastica получаются очень читабельные заголовки на каждом изображении?

    Все картинки при этом:

    • не особо темные;
    • довольно контрастные.

    Ответ - маскировка (scrim).

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

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

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


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

    Научитесь утапливать и выделять текст

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

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

    • Размер (текст можно сделать меньше или больше).
    • Цвет (можно уменьшить или увеличить контраст; яркие цвета всегда привлекают внимание).
    • Насыщенность (шрифт может быть тоньше или толще).
    • Прописные буквы (текст можно набрать прописными или строчными буквами).
    • Курсив.
    • Разрядка (либо трекинг).
    • Поля (они к самому тексту не относятся, но могут использоваться для привлечения внимания, в связи с чем также включены в данный список).

    Здесь есть и поля, и цвет, и прописные буквы
    Существуют и другие способы, правда я бы не стал их очень рекомендовать:

    • Подчеркивание. На сегодняшний день подчеркивание следует применять только для ссылок.
    • Цветной фон. Данный способ встречается не часто, но 37signals какое-то время применяли его для обозначения ссылок на своем веб-сайте.
    • Зачеркивание. Добро пожаловать в 90-е!

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

    Утапливание и выделение

    Все методы выделения текста делятся на две группы:

    • Методы, уменьшающие видимость текста: уменьшение контраста, размера, полей.
    • Методы, которые повышают видимость текста: увеличение насыщенности, размера, применение прописных букв.

    Мы назовем их способами для «утапливания» и «выделения» текста. Мы не будем их называть «визуальный вес», так как это скучно.

    Заголовок «Material Design» выделен многими способами. Он очень контрастный, большой и выделен болдом.

    Текст в футере же, наоборот, утоплен. Он неконтрастный, маленький и обычного начертания.

    А теперь самое важное.

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

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

    Баланс визуальных стилей

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


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

    Подписи под цифрами, вопреки тому, что они маленькие и серые, набраны более жирным шрифтом и прописными буквами.

    Все дело в балансе.

    Contents Magazine - хороший пример утапливания и выделения текста.

    • Название статей - единственный элемент на страничке, который набран не курсивом. В таком случае, именно отсутствие курсива так привлекает внимание (в особенности вместе с жирным начертанием).
    • Имя автора здесь выделено болдом. В отличие от слова «by», которое набрано обычным шрифтом.
    • Небольшая неконтрастная подпись «ALREADY OUT» здесь никому не мешает. Но за счет прописных букв, довольно щедрой разрядки, крупных полей сразу привлекает внимание.

    Выбранные и активные элементы

    Выделение активных элементов интерфейса- еще более трудная задача.

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

    Что же делать?

    Можно применять:

    • Цвет текста
    • Цвет фона
    • Подчеркивание
    • Небольшую анимацию (подъем и опускание)

    Вот один проверенный метод: сделайте все белые элементы цветными, либо цветные элементы белыми, но при этом затемнив фон.

    Выбранный значок стал белым, но, тем не менее, сохранил контраст относительно фона

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

    Используйте исключительно хорошие шрифты

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

    Сайты с отличительным характером могут применять отличительные шрифты. Однако для большинства интерфейсов необходимо что-то простое и чистое.

    Потому что данная статья для тех, кто учится. Среди современных бесплатных шрифтов есть очень много достойных вариантов. Так почему бы ими не воспользоваться?

    Так что прямо сейчас скачайте их для вашего следующего продукта.

    Ubuntu имеет много начертаний. Для некоторых программ он очень специфичен, для остальных - подходит идеально. Можно всегда скачать на сервисе Google Fonts.

    Open Sans

    Open Sans - это популярный шрифт, очень легко читается. Отлично подходит для главного текста. Можно всегда скачать на сервисе Google Fonts.

    Bebas Neue

    Bebas Neue прекрасно подходит для заголовков. Состоит лишь из прописных букв. Можно скачать на веб-сайте Fontfabric . Там же можно посмотреть примеры применения.

    Montserrat

    Montserrat доступен лишь в двух начертаниях, однако этого вполне достаточно. Данный шрифт - это лучшая бесплатная альтернатива Proxima Nova и Gotham, но он не так хорош, как они. Можно скачать на сервисе Google Fonts.

    Raleway хорошо подходит для заголовков. Возможно, чуть чересчур для главного текста (эти «w»!). Довольно красиво выглядит начертание Ultralight (нет на изображении). Можно всегда скачать на сервисе Google Fonts.

    Cabin всегда можно скачать на Google Fonts.

    Lato можно всегда скачать на сервисе Google Fonts.

    PT Sans можно всегда скачать на сервисе Google Fonts.

    Entypo Social

    Включая, к примеру, Proxima Nova .

    Крадите как художник

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

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

    Но где искать данные примеры? Вот несколько специализированных сайтов, которые были для меня полезными. Итак, в порядке убывания.

    1. Dribbble

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

    Несколько человек, на которых следует подписаться.

    • Victor Erixon . У него довольно специфичный стиль. И это радует. Чистый, красивый дизайн в стиле Flat. Дизайном он занимается только три года и уже считается одним из наилучших.
    • Focus Lab . Эти люди «звезды Dribbble». Их работы соответствуют такой репутации. Крайне разнообразные и всегда наивысшего класса.
    • Cosmin Capitanu . Еще один хороший дизайнер. Все его работы выглядят крайне футуристично, но точно не безвкусно. Он превосходно работает с цветом. Правда при этом не очень сосредотачивается на UX. Правда это проблема dribbble в общем.

    Работы Focus Lab, Victor Erixon и Cosmin Capitanu

    2. Flat UI Pinboard

    Я не знаю кто такой «warmarc», однако его доска на Pinterest с примерами различных мобильных интерфейсов каждый раз нереально мне помогала в поисках отличных примеров .

    3. Pttrns

    Это галерея различных скриншотов мобильных программ. На Pttrns очень радует то, что весь веб-сайт сделан по UX паттернам. Это существенно облегчает поиск в зависимости от того, над каким именно элементом интерфейса вы в данный момент работаете, будь то страничка с регистрацией, результаты поиска, личный кабинет и так далее.

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

    А пока что крадите как художник)

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

    Заключение

    Я перевел данную статью, так как сам очень хотел бы ее прочесть несколько лет назад. Очень надеюсь, что она вам поможет.

    В случае если вы UX-дизайнер, сделайте красивый макет сразу после того, как набросаете полноценный прототип.

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

    Интерфейс – это некий «мост» между пользователем и системой. С помощью интерфейса пользователь сможет объяснить системе, чего он от неё хочет, а система это выполнит. Но что случится, если это понимание между машиной и человеком не будет достигнуто? Пользователь просто уйдёт с сайта. Вот так ведут себя интернет-пользователи по данным Online Marketing Institute:
    — 85% могут уйти с сайта, если им не понравится дизайн интерфейса;
    — 83% покинут сайт, если будут вынуждены делать много кликов, чтобы найти то, что им нужно;
    — 40% никогда не вернутся на сайт, если им было трудно его использовать в первый раз.

    Принципы хорошего интерфейса одинаковы и для веб-сайтов, и для программ, и для сервисов. Я собрала 17 основных из них (а также в конце вас ждет небольшой обзор способов тестирования интерфейса на юзабилити).

    Из статьи вы узнаете:

    Хороший интерфейс должен:

    1. Быть интуитивно понятным.

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

    Интуитивно понятный интерфейс — это тот, в котором:
    1) все элементы выстроены по принципам элементарной логики.
    Возьмем для примера сайт с текстовым контентом (статьями). Его логический интерфейс будет таким:
    — название сайта находится в самом верху страницы, под ним — краткое описание ресурса;
    — ниже располагается меню с разделами сайта;
    — блок с контактами и обратной связью в правой верхней части меню;
    — статьи расположены в порядке их добавления на сайт;
    — в конце каждой статьи есть кнопки “следующая” и “предыдущая”;
    — кнопки категорий всегда должны быть на виду, чтобы можно было в любой момент перейти в другой раздел;
    — правила сайта, подробная контактная информация, данные о разработчиках и т.д. располагаются в футере сайта, так как именно там их всегда и ищут.

    Не запутывайте пользователя нестандартным расположением привычных блоков, а используйте проверенные принципы. Блог маркетолога Heidi Cohen структурирован понятно и логично:

    Вот пример из интерфейса программы. Даже там, где значки не подписаны, вполне понятно, что они могут означать. Кнопки расположены в порядке логики — ведь каждому интуитивно понятно, что после кнопки “пауза” должна следовать кнопка “стоп”, и т.д.

    2) кнопкам присвоены понятные обозначения.
    Избегайте кнопок, изображение на которых может ввести в заблуждение пользователя. Не нужно изобретать велосипед. Большой знак вопроса сразу же говорит пользователю о том, за ним скрывается какое-либо руководство или помощь. Лупа — это всегда форма поиска на сайте.

    А вот что бы вы подумали, увидев на сайте или в программе кнопку, например, с перечеркнутым квадратом? Скорее всего, многие пользователи даже не рискнут на нее нажать, так как им будет непонятно, к чему приведет это действие.

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

    3) есть помощь пользователю, если он “заблудился”.
    Если пользователь попал на страницу 404, сразу же на ней дайте ему кратенькую инструкцию о том, что он может сделать дальше. Например, предложите ему вернуться в предыдущий раздел и поискать нужную информацию там.

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

    И один наглядный пример:

    2. Быть предсказуемым.

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

    Пример дизайна интерфейса программы-плеера. Верхние кнопки (“предыдущий” — “воспроизвести” — “следующий”) должны выполнять именно эти функции, а ползунок менять уровень громкости.

    Еще несколько примеров. Если сделаете кнопки объемными, они будут больше выглядеть именно как кнопки, поэтому кликать на них будут с большей вероятностью:

    А переключатель on/off понятно выглядит, когда сделан вот так:

    Один из самых больших страхов дизайнеров — это то, что их сочтут неоригинальными. И поэтому они часто избегают использования техник, которые давно проверены на эффективность и работают, в пользу создания “чего-то нового и креативного”. Заниматься открытым плагиатом, конечно, не нужно. Но использовать уже знакомые пользователям модели построения интерфейса — это верный способ сделать его предсказуемым. Какие ресурсы чаще всего использует ваша целевая аудитория? Facebook, LiveJournal, Twitter, Amazon, Youtube? Используйте похожий стиль и в своем интерфейсе, чтобы они смогли почувствовать себя в привычной обстановке. Например, если вы ориентируетесь на Youtube, сделайте главное меню вертикальным и поместите его слева страницы, а строку поиска разместите по центру сверху.

    3. Быть минималистическим.

    Стремясь разместить в интерфейсе как можно больше категорий, меню, кнопок и т.д., вы только нанесете ему огромный вред. Слишком загроможденный интерфейс – это большое препятствие к его пониманию пользователем. Всё, что может быть описано одной фразой, не должно быть описано тремя. Лишние элементы и подкатегории на главной странице тоже ни к чему. Определить, какие «лишние», а какие нет, вам поможет тестирование (о том, как его можно провести в конце статьи) . Но не стоит и жертвовать чем-то действительно важным – если вы знаете, что без какого-то пояснения (о подсказках будет подробнее ниже) или дополнительной кнопки пользователю будет тяжело разобраться, то поместите её в интерфейс, но сделайте это максимально лаконично.

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

    4. Быстро загружаться.

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

    Чтобы ваш сайт стал быстрее быстрого, используйте эти советы: 8 способов .

    5. Показывать все важные опции.

    Использовать выпадающие списки и меню лучше только там, где этого избежать невозможно. В остальных случаях старайтесь сразу же показать пользователю все его возможности. Если часть возможных действий будет скрыта, пользователь может быть и не догадается, куда ему нужно нажать для совершения определенного действия. А если эти действия целевые (“купить товар”, “сделать заказ”), то их и вовсе нельзя прятать в выпадающие меню, а наоборот, сделать на них особый акцент.

    Пример того, какое выпадающее меню может иметь право на жизнь.Здесь при наведении курсора открываются подразделы в разделах меню, и это вполне удобно. А вот, например, кнопка “Контакты” видна сразу же, без дополнительных наведений.

    Кнопки для предпочтительных действий пользователей должны выделяться на фоне других. Здесь такая кнопка “Добавить в корзину”.

    6. Уметь общаться с пользователем.

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

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

    7. Иметь разные стили для кнопок с разными типами действий.

    В любом интерфейсе у каждой кнопки есть свое назначение: перейти куда-то, раскрыть меню, открыть в новом окне, скачать и так далее. Чтобы не путать пользователей, соблюдайте такие правила:

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

    На этой странице сразу понятно, что мы находимся в разделе “Услуги” и он выделен красным цветом. Возвращаясь к пункту 5, отмечу, что тут целевое действие — покупка, поэтому кнопка “купить” выделена на фоне остальных и является объемной.

    8. Быть привлекательным.

    Функциональность и удобство — это хорошо, но есть еще и элементарное “красиво/не красиво”. Любому пользователю будет гораздо приятнее иметь дело с интерфейсом, который, ко всему прочему, еще и радует глаз.

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

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

    9. Давать возможность персонализации.

    Персонализация — это возможность настроить что-либо “под себя”. Чаще всего эту функцию можно встретить в программах, сервисах и приложениях. Пользователь может поменять, например, цвет шрифта, стиль иконок, фоновое изображение, размер текстовых блоков так, как ему понравится (выбирая из предложенных вариантов, естественно).

    В сервисе Trello можно поменять фон на другой цвет или изображение.

    А вот так позволяет персонализировать свой аккаунт Twitter:

    10. Быть лояльным к ошибкам пользователя.

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

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

    11. Говорить на языке пользователя.

    Весь текст интерфейса, любые обозначения должны быть созданы под целевую аудиторию ресурса. Тут всё очевидно: если вы делаете обучающий сайт для детей дошкольного возраста, то текст интерфейса должен быть написан на “детском” языке. Если у вас программа для продвинутых веб-мастеров, то вы смело можете использовать специфические термины без пояснения — целевая аудитория и так их знает. А если это сервис для новичков, то язык должен быть максимально прост.

    12. Предоставлять оптимальное количество вариантов выбора.

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

    Также это можно реализовать с помощью блока “Хиты продаж”, как показано на примере.

    13. Давать мягкие подсказки.

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

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

    14. Затемнять фон под модальными окнами.

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

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

    15. Иметь короткие формы регистрации.

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

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

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

    16. Иметь простые принципы заполнения полей.

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

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

    2. Если пользователю нужно всё-таки вводить вручную свои данные, то используйте построчную проверку системой правильности заполнения формы. Никому не понравится, если система после каждой ошибки заполнения будет обнулять все строки, заполненные ранее.

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

    4. Максимально снизьте вероятность неправильного заполнения формы.
    Представьте себе ситуацию. Вы начинаете вводить в поле свой номер телефона. После первого заполнения система вам говорит: “Номер телефона должен быть введен в 10-значном формате”. Вы вводите еще раз, а система вам выдает: “Номер телефона не должен содержать дефисов”. И тут вы уже начнете нервничать и мысленно проклинать этот сайт (а может, и не мысленно). Идеальная форма ввода — это когда пользователь может написать в неё всё, что угодно, и система не скажет ему “неправильно”. Конечно, обработка данных будет несколько затрудняться, так как часть запросов вам придется обрабатывать вручную. Но ведь ваша главная цель — это принять заказ, а не отсеять нетерпеливых клиентов.

    17. Предоставлять варианты удобного управления.

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

    Как протестировать интерфейс на юзабилити?

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

    Тестирование сможет решить все эти проблемы. Каким образом можно его осуществить?

    1. Ручным способом.

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

    2. Автоматизированным способом.

    Такой способ тестирования проводится с помощью специальных программных средств, которые как бы подражают действиям живого человека при ручном тестировании. Для такого тестирования не требуется участие человека, поэтому скорость его выполнения повышается, а стоимость денежных затрат снижается. Есть тут одно большое “но”. Автоматизированное тестирование не может дать 100%-результатов, так как проводится оно только по формальным признакам (тем, которые вбиты в программу), и не предоставляет возможности найти дефекты юзабилити, которые могут быть восприняты только человеком (например, цветовая гамма интерфейса).

    3. C помощью фокус-групп.

    На мой взгляд, самый лучший метод тестирования в плане соотношения цена-эффективность. Проводится он следующим образом:
    — набирается несколько фокус-групп, состоящих из ваших целевых пользователей. Разделять группы вы можете по разным признакам: зарегистрированные/незарегистрированные, постоянные/редкие пользователи, а также по разным демографическим показателям (которые вписываются в вашу ЦА);
    — каждой группе даются задания совершить определенные действия на вашем сайте/сервисе/программе. Вы должны сказать испытуемым, что они должны сделать, но не говорите как. В этом и заключается суть тестирования — посмотреть, с помощью каких действий пользователи будут достигать своей цели.
    — после всего этого вы анализируете, как именно испытуемые выполняли свои задания — куда они нажимали, по каким ссылкам переходили, быстро ли нашли желаемое и т.д.

    Есть специальные сервисы, с помощью которых можно легко находить людей для проведения такого тестирования. Например, Askusers , Мудрый Тест , Usabilla .

    Наглядный пример тестирования интерфейса пользователя

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

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

    Получилась вот такая:

    2. Опрос тестируемых пользователей показал, что практически каждый из них считает боковую панель сервиса очень замусоренной и неудобной для использования. Изначально страница была вот такая:

    А вот макет новой страницы:

    Полную версию результатов этого тестирования смотрите .

    И в заключение.

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