Блог о дизайне и интерфейсах | Веб-дизайн, интерфейсы, юзабилити, UX, графический дизайн.

Апр 25 2013

5 самых опасных убийц креативности

Категория: Вдохновение — Максим Шайхалов @ 13:00

Иллюстрация: Oscar Ramos Orozco

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

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

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

1. Несоответствие ролей

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

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

2. Внешние ограничители

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

3. Строгие ограничения ресурсов

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

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

4. Отсутствие социального многообразия

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

5. Уныние / Нет положительных отзывов

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

Творческие люди расцветают от влияниях их идей . Без обратной связи, их мотивация начинает чахнуть и умирать.

—

Как насчет вас?

Что убивает ваше творчество?

Читать дальше →

Теги: Вдохновение, исследование, креатив, ограничения, опасносте

Апр 19 2013

О Depositphotos

Категория: Это интересно! — Максим Шайхалов @ 0:16

Это рекламная статья.

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

Звучит достаточно пугающе, но на самом деле все просто. Ведь у нас есть микростоковые фотобанки, или просто – микростоки! Микростоки предлагают фотографии прекрасного качества, которые Вы легко найдете с помощью не менее прекрасного интерфейса, да еще и недорого. Что может быть лучше? А лучше может быть крупный стремительно развивающийся микросток мирового масштаба, с ресурсом иллюстраций более 13 500 000 фотографий, векторных изображений, видеороликов и офисами в США, Германии, Италии, Великобритании, Украине и России. Называется он Depositphotos. Не нашли нужный материал сегодня? Не беда, заходите через недельку – за это время коллекция микростока пополнится более чем на 150 000 новых фотографий и иллюстраций.

Ну что ж, с выбором фотобанка мы определились, что будем делать дальше? А дальше нам нужно лишь зарегистрироваться на сайте, определить искомую категорию изображений (векторной графики, видео), найти и приобрести понравившийся экземпляр. Также будет полезно ознакомиться с ценами на изображения и планами подписок, а также постоянно проводимыми акциями и конкурсами. Рассчитаться с фотобанком можно посредством системы электронных платежей PayPal, MoneyBookers, Webmoney или Яндекс.Деньги.

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

Посмотреть примеры фото и иллюстраций →

Мар 19 2013

16 px кегль в Вебе

Категория: Веб-дизайн,Интерфейсы — Максим Шайхалов @ 14:00

16 px – это оптимальный размер шрифта для веб-страниц.

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

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

Более того, 16 px – это минимальный размер шрифта для современного сайта, и если вы не поддерживаете этот формат, то лишь напрасно тратите деньги ваших клиентов. Ниже приведены аргументы в пользу актуальности именно такого размера для шрифта.

Доход сайта и привлечение читателей

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

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

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

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

4 факта о чтении, которые должен знать веб-дизайнер

1) После двадцати лет качество зрения у людей снижается, в сорок лет к сетчатке глаза проходит только 50% света, а к шестидесяти годам – всего 20%.

2) У 9% американцев есть проблемы со зрением, а в России эти показатели еще ниже. Многим россиянам зрение не могут полностью исправить даже контактные линзы.

3) Скорость чтения зависит от расстояния до источника: чем выше расстояние, тем разборчивее воспринимаются символы и выше понимание прочитанного. Главный фактор, определяющий оптимальное расстояние, – это именно размер шрифта. Крупные шрифты на билбордах различают практически все люди, чего не скажешь о 12-пиксельном шрифте большинства веб-сайтов.

4) Учитывайте, что большинство пользователей компьютера находятся на расстоянии 50-60 сантиметров от устройства, это позволяет не напрягать глаза слишком сильно. Но печатные источники мы воспринимаем на более близком расстоянии, ведь журнал, который мы читаем, находится на расстоянии меньшем, чем расстояние вытянутой руки, всего несколько десятков сантиметров. Основываясь на этих расчетах, видно, что шрифт в 16 пикселей на экране воспринимается как 10-пиксельный шрифт в книге.

16px текст на 24' мониторе и 12pt текст в книге

16px текст на 15,4' мониторе и 12pt текст в книге

Плохие шрифты снижают посещаемость сайта

Плохой шрифт на веб-сайте является самой распространенной проблемой пользователей (по результатам опроса за 2005 год этот пункт набрал большинство голосов). На данный момент ситуация не улучшилась – показывает выборка дизайнов SiteInspire. Средний размер шрифта для основного текста у них составляет те самые 12 пикселей, которые стали стандартом среди веб-дизайнеров, вопреки требованиям пользователей, большинство из которых жалуется на маленький размер шрифта. Из всех этих дизайнов нет ни одного (!) со шрифтом больше 14 пикселей, а у некоторых размер шрифта еще меньше – 10 px.

Популярные источники готовых дизайнов для сайта ElegantThemes и ThemeForest предлагают веб-разработчикам шаблоны, с размером шрифта не превышающим 12-13 пикселей.

Какое количество ваших читателей имеют 100% качество зрения и не страдают от чрезмерного напряжения глаз во время работы с компьютером? Неужели все ваши читатели моложе 20 и не испытывают проблем с различением миниатюрных шрифтов?

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

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

Не отпугивайте посетителей неудобными шрифтами, ведь чем больше у вас посетителей – тем выше доход принесет сайт в конечном итоге.

Не заставляйте пользователя думать!

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

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

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

16 px – это удобно

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

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

Теги: веб-дизайн, кегль, типографика, читабельность, шрифт

Мар 05 2013

Стопроцентно читабельный сайт

Категория: Веб-дизайн — Максим Шайхалов @ 13:00

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

Приемы повышения читаемости текстов на сайте

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

1. Не используйте мелкие кегли, пытаясь уместить все.

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

2. Не обязательно заполнять все пространство

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

3. Используйте типографику

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

Правила повышения читабельности сайта

Можно выделить несколько простых правил, следуя которым ваш интернет-сайт будет пользоваться популярностью среди подобных сетевых ресурсов:

1. Шрифт по умолчанию для больших текстов.

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

2. Максимальное использование свободного пространства.

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

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

Не слишком большая ширина строки и свободное пространство с двух сторон колонки текста обеспечивает глазам более комфортный переход с конца одной строки на начало новой. Одним из главных правил набора текста для чтения с монитора является включение в одну строку не более 10-15 слов при общей ширине полосы текста не более 75 знаков вместе с пробелами. Стандартная ширина колонки текста при этом должна составлять примерно 50% от всей ширины окна интернет-браузера.

3. Оптимальное межстрочное расстояние.

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

4. Четкий цветовой контраст.

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

5. Минимальное использование текста в картинках и другой графике.

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

Теги: текст, типографика, читабельность

Ноя 12 2012

Книжная и альбомная ориентация в мобильных интерфейсах

Категория: Интерфейсы — Максим Шайхалов @ 14:00

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

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

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

Использование ориентации для вызова второго экрана

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

YouTube в разных режимах.

Но не всегда изменение ориентации работает так продуманно. В CardMunch (визитки в LinkedIn) пользователи могут конвертировать фото визитки в контакт в адресной книге. В альбомном режиме полностью меняется интерфейс представления карт.

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

CardMunch. Отсутствие визуальных подсказок в альбомной ориентации.

Модели поведения интерфейсов

В помощь UX-специалистам я разделил модели поведения интерфейса на 4 типа.

Текучий

Интерфейс меняется в зависимости от размеров экрана.

В Skype иконки меняю свое положение в зависимости от ориентации.

Pocket’s: одинаковая сетка, разная ширина.

Расширяющий

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

IMDb для IPad.

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

Дополняющий

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

Основной и дополнительный интерфейс в финансовом приложении.

Непрерывный

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

Программа передач в Smart Remote.

Определение ориентации по умолчанию

Above & Beyond интерактивное приложение-книга для Айпада о жизни и творчестве карикатуриста John Kascht. Насладиться карикатурами мы можем как в портретном так и в альбомном варианте. Однако горизонтальный режим показывает больше значимых и функциональных элементов. Вертикальная ориентация является дефолтной в Айпаде и перенос функциональных элементов в горизонтальную может сбить пользователей с толку.

Отсутствие управляющих элементов в вертикальной ориентации.

И в тоже время на планшетах Android, Windows 8, Playbook BlackBerry, ориентация по умолчанию — альбомная. Поэтому всегда стоит помнить о ориентации по умолчанию на том или ином устройстве.

Контекст использования

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

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

Поваренная книга Бетти Крокер отличный пример правильного использования ориентации.

Визуальные подсказки о режимах ориентации

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

Визуальные подсказки могут значительно облегчить понимание интерфейса. Смотрим примеры.

Заголовок приложения

Положение заголовка может дать подсказку о дополнительной функциональности при смене ориентации.

Примечание: Данный метод не 100% панацея. Более надежным можно считать применение графических указателей или Coach Marks.

Иконка

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

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

Примеры:

Изменение кнопки в заголовке окна.

Иконка может работать и как индикатор ориентации.

Индикация ориентации.

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

Шторка

Как оно работает.

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

Заключение

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

Читать дальше →

Теги: альбомная ориентация, книжная ориентация, мобильные интерфейсы, проектирование, смартфон

Следующая страница →