Архив рубрики: Дизайн в бизнесе

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

Дизайн в бизнесе

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

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

Правило первое: определите границы доверия.

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

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

1

А вот аскетичный дизайн  интерфейса  Чумаркова Андрея.

2

Боровской Александр  предложил красочный и яркий вариант.

3

 

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

 Правило второе: определите позиционирование.

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

В конкурсе на создание логотипа для WOODANS очень четко определено позиционирование компании, — инновационная компания в премиальном сегменте. В результате заказчику представлено много интересных работ. Работа Максима Адреева  отражает премиальность — светлый деревянный фон, инновационность показана в виде модели животного.

4

 

                 Правило третье: определитесь, копировать или создавать 

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

 

 

Лучшие дизайны февраля

Дизайн в бизнесе

Коллеги и друзья,

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

В категории «Разработка фирменного стиля» отмечаем работу Смолина Дениса по созданию лого и фирменного стиля для турагентства. В работе представлен полноценный концепт, выбрано оригинальное цветовое решение в сегменте туризма.

смол

Работа Грдзелидзе Майи как пример лаконичного, выдержанного стиля в разработке дизайна интерфейсов  нумизматического интернет-аукциона.

мая

Отлично передана технологичность при создании фирменного стиля и логотипа для ИТ-компаниии в работе Заплавского Михаила. Удалось отлично передать свечение, оригинально представлен логотип.

777

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

банк

В работе Сынгуряну Алексея по редизайну лого и фирменного стиля «Мегаполис Медиа» отлично передан объем и игра света. Перламутровые оттенки и фиолетовый органично сочетаются и свежо смотрятся.

мед

 

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

мед1

Интересные работы по конкурсу на создание логотипа для M4 АГРО — российские фрукты  Сырова Антона

фру

 

и Кулыгиной Юлии.

фру1

Обе работы являются отличным примером экологичного дизайна.  Лаконично, свежо и аппетитно.

Логотип для СТО «Ягуар» отлично смотрится на майке девушки. Оригинальное представление в сегменте техсервиса.  Работа  Черняк Андрея.

сто

 

Стильный логотип  для интернет-проекта «КОНФЕТКИ» Лопатина Виталия.

Работа обыгрывает тему знакомств и общения, тонкий намек, отличная узнаваемость.

кон

Удачи в марте, интересных конкурсов вам и вдохновения.

Основные этапы проектирования интерфейсов

Дизайн в бизнесе

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

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

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

Рассмотрим проект, по которому вместе с дизайном делалось и интерфейсное проектирование. Проект создания интернет-магазина «Сила жизни», ориентированного а продажу товаров для детей больных ДЦП. В данном проекте представлено много дизайн-концептов, но по каким критериям выбирать  лучший?

Есть сильные концепты, акцентирующие эмоциональную составляющую, например работа дизайнера Бомко Илоны 

или дизайнера Губаренко Максима 

2

А вот работа с качественно проработанным торговым функционалом Чичиной Надежды

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

4

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

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

Качественный «федеральный дизайн» с использованием цветов триколора дизайнера Москвич Елены

5

 

или демократичный лаконичный дизайн Поздеева Алексея в несколько западном стиле

6

 

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

Конечно же у Dizkon есть огромное преимущество — в ходе конкурса рождается истина и заказчик сам начинает понимать свое видение и предпочтения видя, как мог бы выглядеть его проект в реализации.

 

Юзабилити собственными силами, рекомендации для малого бизнеса.

Дизайн в бизнесе
        Услуга юзабилити-проектирования интерфейсов уже не является экзотическим дополнением к проекту создания программного обеспечения. Очевидно, что чем удобнее будет интернет-магазин, тем больше покупок в нем будет совершено, а чем удобнее интерфейсы предоставляемого сервиса, — тем больше людей им воспользуется.
                В классическом варианте, юзабилити-проектирование выполняют профессиональные юзабилити-студии. Первым этапом они проводят юзабилити-тестирование прототипа будущей системы. Предполагается, что пользователи работают с системой в специальной студии, звукоизолированной, где ничто не отвлекает их от работы с системой. Далее, поведение пользователей анализируется, появляется понимание, где интерфейсы не соответствуют ожиданиям пользователя, где он останавливается в непонимании, какое дальнейшее действие предпринять. Дополнительно, возможно использование приборов, следящих за движением глаз пользователя, но я описываю только самые простые этапы тестирования. На выходе заказчик получает отчет с рекомендациями по внесению изменений в интерфейс.
                Юзабилити-проектирование решает ряд вопросов между заказчиком и исполнителем, когда есть разногласия по вопросам организации интерфейсов. Так же, оно может быть полезным инструментом руководителю проекта, который, представляя экранные формы на согласование, сталкивается с разными мнениями. Часто бывает так, что появляются пожелания от согласующих коллег, которые могут нарушить логику интерфейса. В этом случае юзабилити-тестирование помогает снять противоречия и объективно понять, что в интерфейсе спроектировано хорошо, а что плохо. Предметом дебатов между заказчиком и исполнителем является дизайн. Но цветовой акцент, поставленный не в том месте, может качественно повлиять на успешность решения. Например, невинное желание собственника будущего интернет-магазина сделать иконки поярче, может отвлечь внимание пользователя от кнопки «Купить» — главной кнопки магазина и от карточки товара.
              Однако, такая услуга по юзабилити-проектированию профессиональной студии стоит не дешево, а небольшие предприятия, желающие запустить сервис, не могут себе позволить дополнительные затраты. Как провести юзабилити-тестирование своими силами?
            Вы можете собрать аудиторию, дав объявление в социальной сети или ресурсе, где люди ищут подработку. За 300 рублей, многие с удовольствием протестируют ваш продукт независимым взглядом, а за 500 приедут в офис, таким образом вы сможете понаблюдать, в какие моменты пользователи испытывают затруднения. Вы получите качественный шаг вперед, если ваш продукт протестируют около 30 человек, а если хотя бы половина пользователей будут из вашей целевой аудитории то, полученные результаты позволят вам сделать сервис лучше. Работу пользователей с сервисом или интерактивным прототипом лучше записать при помощи программных средств, пишущих видео с монитора (например, Camtasia). Просматривая записи, вы поймете где поведение пользователя не соответствует вашим ожиданиям. Разработайте анкету с вопросами и попросите людей на них ответить, — вы получите независимую оценку и мнения. Наконец, полученные данные станут инструментом разрешения противоречий заказчика и исполнителя, потому как независимый взгляд многих людей позволяет определиться со способом реализации интерфейса.
D1-87-D0-B5-D1-80-D0-BD-D0-B0-D1-8F

Служебные интерфейсы, как они влияют на успех внедрения

Дизайн в бизнесе
             При составлении технического задания и проектировании интерфейсов основное внимание уделяется внешней части системы. Большинство аналитических обзоров платформ для интернет торговли, дает обзор интерфейсов клиентской части и функций интернет-магазина. Описания других систем аналогично делают упор на функциональные возможности клиентской части. Удобство работы с администраторской частью традиционно считается второстепенным фактором. На этапе проектирования системы, многие не задумываются о том, что неудобные интерфейсы администрирования приводят к дополнительным затратам на обучение специалистов и ведут к ошибкам в работе с вводимыми данными. Лишь когда система уже внедрена, обнаруживается, что интерфейс администрирования имеет нужный функционал, но использовать его неприятно или неудобно.
                В большинстве случаев, заказчики отдают разработку служебного интерфейса на усмотрение разработчика. На протяжение многих лет разработки интерфейсов, я по-разному реализовывала служебные модули программы, реализуя в них творческие замыслы. Заказчик хотел функционал системы, дизайн и конструкция интерфейсов, с которыми будут работать многие сотрудники, — интереса не вызывал. Имея свободу творчества, разрабатывались разные варианты, имеющие ряд плюсов и минусов. Приведу некоторые из них.
                  Служебный интерфейс а-ля Apple.
                  Стилистика предполагает темный фон, большие кнопки, контрастные цвета кнопок. Предполагается, что сотрудник, который целый день работает с этим инструментом, оценит креативный подход дизайнера. Однако, темный цвет угнетающе действует на сотрудника, у которого стоит задача, например, внести 50 описаний товара, а большие элементы интерфейса заставляют его делать лишний клик при переходе между функциями системы.
Вот конкурс, где предлагается разработать подобный дизайн для служебной системы. Несмотря на то, что система будет использоваться клиентами, она будет служебной, т.е. выполнять довольно широкий функционал и полученные результаты использовать. Соответственно, пользователь, в течение нескольких часов будет работать с контрастным интерфейсом. Если предполагается использование только приложения для планшетных ПК и телефонов, то, наверное, это было бы стильно, но если такие цвета будут в браузерной версии для работы на компьютере, то пользователю придется привыкать и испытывать неудобства.
                     Представлю одну из моих работ в этой стилистике. Было принято решение создать интерфейс служебной программы для силовой структуры в стилистике игры. Это решение базировалось на предположении, что сотрудникам будет интересно использовать программу с красивыми интерфейсами. Игровая стилистика сделает программу привлекательной, внедрение будет эффективнее, использовать программу будут чаще. Однако, на практике оказалось, что сотрудники находятся на работе и интерфейсы, выполненные в игровой стилистике, вызывают непонимание и неприятие.

                       Было очень печально, когда старания, вложенные в разработку таких замечательных элементов не были оценены, а интерфейсы системы было решено заменить на аскетичный вариант.
                       Служебный интерфейс а — ля 1С 
                       Разумеется в программе для бухгалтера с множеством функций и опций уместно наличие пятидесяти иконок и переходов на другие экранные формы. Предполагается, что бухгалтер проходит специальное обучение, в ходе которого он научится разбираться в море иконок и кнопок. Но, если предполагается, что пользователь не будет получать специальную квалификацию и месяцами учиться работе с системой, рекомендуется не перегружать интерфейсы количеством кнопок и переходов, а иконки делать однозначно трактуемыми.
              Вот интерфейс служебной программы, он лаконичен, в нем нет дизайнерских элементов, что делает это сугубо рабочим, никак не вдохновляющим сотрудников к работе с ним. Никаких подсказок, иконок, — все строго. Да, это современный стандарт, но в нем нет «изюминки», а так же элементов, с которыми работать хочется.
                  Выполнив ряд проектов по созданию служебных интерфейсов и выполнив много экспериментальных работ, я сделала ряд выводов, некоторыми из которых сейчас поделюсь.
                Во-первых, удобство служебных интерфейсов влияет на успех бизнеса в целом. Например, Вы можете сделать шикарный интернет-магазин, но сотрудники не будут наполнять его нужным контентом, «забывать» добавить фотографии, наконец, делать работу крайне медленно, если у интернет-магазина будет плохой интерфейс администрирования товара.
                    Предпочтительны светлые оттенки, однако, делать служебный интерфейс излишне блеклым и сухим не рекомендуется. Людям, которые будут с ним работать, будет приятно видеть цветные элементы, понятные иконки, приятные сервисы, такие, например, как их фотография говорящая о том, что сотрудник вошел в систему. Этот совет актуален для интерфейсов программ для колл-центров и других видов сервисной работы.
                          Вот стилистика, которая, полагаю, идеально подошла бы для служебных программ, выполненная дизайнером PelmeshkOsS
 
redcube

Креативный дизайн или продающий дизайн, ищем компромисс

Дизайн в бизнесе
         Профессионализм в дизайне и других творческих профессиях имеет некую двойственность и специфику. С одной стороны, дизайнер-профессионал действует механистично: понимает, что понравится аудитории, чтобы веб-ресурс был успешным, управляет ожиданиями заказчика, формирует эскизы согласно юзабилити-стандартам. С другой стороны, нами движет желание сделать что-то оригинальное, выделяющее веб-ресурс среди конкурентов. Удачные и яркие проекты, даже при обоюдном желании у заказчика и исполнителя экспериментировать, получаются крайне редко.  
               Почему так происходит? 
              В желании выйти за рамки стандартов, вложить душу и изобретательность, придумать что-то принципиально новое, мы часто получаем интересные концепты. Однако, правила юзабилити сайта и правила построения витрины интернет-магазина диктуют реалии. Поэтому рекомендую брать хорошую, стандартную, соответствующую всем правилам юзабилити задумку и добавляем в нее «изюминки» и оригинальные элементы. 
        Рассмотрим пример — интернет-магазины подарков «Красный куб» и «LEFUTUR». Очевидно, что создавая дизайн интерфейсов магазина, продающего эмоции, — магазина подарков, нестандартное творческое и вдохновляющее решение это требование. 
              Рассмотрим главную страницу интернет-магазина «Красный куб». Очень душевный дизайн, показывающий дружественность, теплоту. Об этом свидетельствует «рукописный» шрифт и миловидные персонажи. Решение нестандартное и действительно творческое. Однако, заходя на этот ресурс, не сразу понятно, что попал в интернет-магазин, — нет товара и цены, а взгляд разбегается между многими сообщениями «рукописным шрифтом». Баланс между творческой и имиджевой главной страницей и функционалом, обеспечивающим продажи, восстанавливается, когда клиент попадает на страницу товаров. 

 

           А магазин «LEFUTUR» нашли менее сложный пусть к эмоциональному и нестандартному торговому решению. В интерфейс, созданный по стандартным правилам, добавлена нестандартная и остроумная классификация товаров. Товарные категории «Человек подвижный», «Человек работающий» и др. дают понять, что мы находимся в удивительном магазине, при этом сразу же видим товары и ценники, т.е. мысль пользователя направляется на покупку. 
               Теперь несколько слов о цветовых оттенках дизайна. Часто заказчик в требованиях указывает, что бренд относится к сегменту премиум плюс и сообщает, что нужен стильный дизайн с намеком на солидность, в темных тонах. И вот тут кроется тонкость! Интернет-магазины и ресурсы, сделанные в темных тонах, ассоциируются с высокой ценовой категорией, соответственно, многие могут уйти с ресурса, не открывая страниц с ценовой политикой. Получается, что очень хороший стильный дизайн в темных тонах и шоколадных оттенках может оттолкнуть часть аудитории, и, пусть даже будет элегантное и стильное решение, но оно не лучшим образом скажется на продажах. 
             Вот пример работы дизайнера mz777. Если рисунок на черном фоне сделать цветным, то будет дорогой технологичный формат. Дизайнер предложил очень стильное решение, но темные оттенки в массовом сегменте, по моему мнению, лучше не применять. Зато такой дизайн отлично подошел бы магазину стильных вещиц для путешествий. 
   


А вот демократичный дизайн пользователя Sanguine. Белый фон и расчет на массовую аудиторию. 

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

k2b_zooexpress_3-2B-E2-80-94-2B-D0-BA-D0-BE-D0-BF-D0-B8-D1-8F

5 секретов работы с Заказчиком, не определившим свои требования

Дизайн в бизнесе
          Сколько творческих мук доставляют дизайнерам и руководителям проектов заказчики, которые имеют видение задачи, но не имеют сформулированных требований к дизайну. В моей профессиональной практике я сталкиваюсь со сложностями в формулировках брифа в каждом третьем проекте. Интересно, что наиболее креативные и интересные решения по дизайну интерфейсов и систем подсказок пользователю, были созданы именно в процессе работы с такими заказчиками, — в ходе обсуждений и диалогов, а так же в ходе опросов пользователей, к которым мы прибегали, когда не могли достигнуть консенсуса. 
     Многие профессионалы предпочитают отказаться от работы с людьми, которые расплывчато формулируют свои требования, активно участвуют в процессе создания дизайна путем иногда навязчивых рекомендаций и требуют вносить изменения в оформленный концепт. Позиция правильная, она позволяет экономить время и выполнять ясные задачи, делать прогнозируемые по времени и трудозатратам проекты. Однако, если вам не чужд поиск, и вы хотите расширять число клиентов, рекомендую не отсекать сразу подобные проекты. Тот опыт, который может быть получен окупится, а нестандартные решения, которые могут быть рождены в диалоге вы сможете использовать в дальнейшем, расширяя список своих конкурентных преимуществ и обогащая портфолио.
               Публикую пять секретов, используя которые вы сможете «в споре рождать истину», приходить к соглашению и приобретать лояльных заказчиков, которые будут в дальнейшем доверять вам. 
    Секрет первый. 
    Демонстрируйте не прототип макета, а концепции. 
          Итак, проект начат, задача, хоть и не детально, но сформулирована, вы предлагаете заказчику свои варианты дизайна. Допускаю, что, вы сделали макет, который, на ваш взгляд, кажется наиболее подходящим, остальные варианты лишь показывают его плюсы. Однако, заказчик не может определиться какой из вариантов он желает детально прорабатывать. Чтобы ситуация не сложилась как бесконечная разработка разноплановых драфтов, все больше расширяя выбор заказчика и тем самым затрудняя выбор еще больше, рекомендую сразу представить по 6-7 версий трех рабочих макетов. Это даст вам аргументацию для диалога, заказчик же будет иметь 18-30 вариантов, соответственно, принять одну из трех рабочих концепций ему будет проще. Вот пример двух концепций интерактивного терминала по торговле кормами для животных.

    Секрет второй. 
    Образное мышление — путь к совместному творчеству. 
              Часто заказчик не может сформулировать не только пожелания, что должно быть изображено, но даже требования к цветовой гамме. Как правило, цветовая гамма это «яблоко раздора» потому, что заказчик может требовать вносить локальные изменения, которые разрушают всю концепцию, или, например, сделать фон интерфейса веб — сайта в красных цветах логотипа, что не приемлемо, т.к. преобладание красного будет раздражать пользователя. Как профессионал, вы не будете выполнять это требование, т.к. это сделает проект неудачным, но как исполнителю вам нужно удовлетворить требования заказчика. 
                В качестве решения могу предложить попросить заказчика максимально подробно описать ассоциации, которые он хотел бы, чтобы интерфейс или логотип вызывал. Приведу пример. В ходе работы над электронным стендом для одной из епархий Русской Православной Церкви, встал вопрос о цветах дизайна. Заказчик хотел «сдержанных, аскетичных тонов». Однако использовать черный было нерационально ввиду аппаратной составляющей, — сенсорная матрица искажала бы глубокий черный, а светлые тона не нравились заказчику. Мы запросили ассоциации и получили ответ:  радость, жизнь, весна. Таким образом, было найдено нестандартное решение использовать зеленый. 

    Секрет третий.
    Используйте опросы, это недорого и эффективно. 
             Бывает, что заказчик при выборе решения руководствуется мнением сторонних людей, своих родственников, коллег, стоящих выше по служебной лестнице. Дизайнер сталкивается с трудоемкой задачей, — предложить нечто, что учитывало бы пожелания разных людей, не вникающих в суть проекта. Или, заказчик хочет, чтобы «было как у такого-то бренда», но с рядом изменений, что делает требования заведомо невыполнимыми. 
            Сузив выбор, предложите провести интернет-голосование, что выберут пользователи, и вы сможете представить аргументированный результат, ссылаясь на мнения независимых людей. 
          Например, в ходе работы над интерфейсом кассы самообслуживания встал вопрос, какого персонажа выбрать в системе подсказок. Диалог был сведен к двум персонажам — лисенку и персонифицированному пакету. Встал вопрос о том, что «Пакет» — не отражает миссию помогать пользователю, а «Лисенок» — хитрый персонаж, может вызывать недоверие. Опрос 50 пользователей определил выбор в пользу «Лисенка». 
 
   
   Секрет четвертый 
   Общайтесь! 
                 Коллеги, конечно же все мы хотим решать вопросы удаленно, но живое общение с заказчиком это путь к компромиссу. Показ концепции «из собственных рук» снижает количество возражений в два раза. Потому, что комментируя показ работы лично, вы даете заказчику пояснения, почему вы выбрали именно такое решение и как оно соответствует задачам заказчика. Высылая первые концепты на почту, пусть даже с комментариями, вы множите число вопросов. Если есть возможность личной встречи, встречайтесь, если нет — используйте общение по Skype или, как минимум, сопроводите телефонные переговоры голосом. 

   Секрет пятый. 
   «Пакет безлимитный» — как предложение сложному клиенту. 
                  Предложите заказчику вариант «безлимитного пакета», вы будете искать ему решение столько, сколько понадобится по срокам и вариантам, но он оплачивает определенную сумму. Если заказчик готов на такие условия — у вас есть поле для оплачиваемых экспериментов, если нет — согласовывайте количество концепций и объем вносимых изменений. 
   
   
   
2014-12-24-2B10-54-41-2BAdvokat72-2B-E2-80-93-2B-D0-B8-D0-BD-D1-84-D0-BE-D1-80-D0-BC-D0-B0-D1-86-D0-B8-D1-8F-2B-D0-BE-2B-D0-B4-D0-B8-D0-B7-D0-B0-D0-B8-CC-86-D0-BD-D0-B5-D1-80-D0-B5-2B-E2-80-93-2BDizkon.ru_

Дизайнер года — Гамзат Ахмедов, адвокат логотипов

Дизайн в бизнесе
Гамзат Ахмедов: «Все хотят перламутровые пуговицы, а для меня принципиально работать элегантно, в минимуме»
Еще недавно Гамзат Ахмедов работал в юридической сфере, а теперь входит в тройку лучших дизайнеров в рейтинге Дизкона, и об адвокатской карьере напоминает только его ник Advokat72. Но ему его новое поприще нравится — за 10 месяцев он принял участие в сотнях конкурсов и выиграл 15 из них. Мы учли как достигнутый результат, так и то, что Гамзат ранее дизайном не занимался, и выбрали его Дизайнером года. О том, как уйти из адвокатуры в дизайн, где черпать вдохновение и каким должен быть идеальный логотип Гамзат рассказал в интервью. 
Ваши работы очень разные, но в то же время просматривается что-то общее. Как бы вы охарактеризовали свой фирменный стиль?
Я охарактеризовал бы его как универсальный, здесь видите ли речь все-таки о продаже идет, не только о творчестве. А там уже кто-то хочет так, кто-то сяк, кому-то свиной хрящик (смеется), стараешься как-то угодить, но когда начинаешь по-своему работать, как ты сам видишь, часто попадаешь мимо.

А каким в таком случае должен быть идеальный логотип?
Мой идеальный логотип, как я вижу это у Майкла Джексона — такие скрещенные ноги в мокасинах – вот на мой взгляд это всем логотипам — логотип. Я бы хотел также элегантно, в минимуме работать – это принципиально. Но к сожалению редко пока так удается, даже я бы сказал пока не удавалось! (Смеется)
Ну конечно всем же хочется в глаза бросаться, чтобы были перья, стразы — получается Киркоров, а не Майкл Джексон!
Перламутровые пуговицы все хотят. (Смеется)
Какой работой вы гордитесь или какая работа была наиболее интересной?
Ох, ну вы же видели сколько было конкурсов… Мне запомнился один конкурс, для меня он был вторым, там такая зеленая ветка с вопросом. (конкурс от компании Succession.Ru – прим.ред) Вот мне понравилось там работать: и идея как-то пришла в голову сразу, я ее минут за 10 сделал и заказчик попался такой глубокий.
Где вы ищете вдохновение для ваших логотипов?
Да это такая вещь – у каждого бывает по-разному.  Берешь описание посмотришь, и на пустой страничке уже решаешь круг, квадрат или треугольник, что-то внутрь помещаешь и начинаешь кромсать то так – то так. Ну и, конечно, Google — это муза у дизайнера, я так понимаю, не я один такой.  Посмотришь по логотипам – у кого как,  необязательно, что ты копируешь или что-то похожее делаешь, наоборот, он может навеять что-то совершенно новое, дать толчок к  творчеству! Так что Google  - спасибо! Это моя главная муза, я не стесняюсь! (смеется)
Вам помогает пошаговая схема Дизкона где заказчик описывает, что он ждет от логотипа?
Ну конечно хотелось бы, чтобы заказчики как-то подробнее описывали свои предпочтения, потому что некоторые вообще как Зоя Космодемьянская. Лучше бы конечно, если бы заказчики комментировали глубже, звездочками отмечали общее направление для дизайнера, а то там разброд и шатание! Посередине свалки заказчику тоже сложно будет что-то отыскивать.
Какие преимущества дает вам Дизкон в работе? Какие новые возможности?
Вот регистрируюсь на другом сайте для дизайнеров, как в каком-то лабиринте после Дизкона, и там неудобно и тут неудобно, я Вам серьезно говорю без подхалимажа, на Дизконе интерфейс и общение с заказчиком куда проще, на других я буксую, и работа как-то не идет!
Когда Дизкон появился вы с недоверием отнеслись к новой площадке или наоборот решили, что это новые возможности?
Вы знаете я работал по-другой специальности, а тут стало интересно, я набрал  «как заработать в интернете» и попался Дизкон, это было еще в феврале.  Я тогда понятия не имел, что такое логотип, с чем его едят, как  его рисуют, для меня логотип это было что-то вроде упаковки и там что-то сверху. Потом на Дизконе я стал выяснять, стал интересоваться, что это такое, основы, заглянул в разные источники. Художник я конечно никакой, если ручкой рисовать, но компьютер это заменяет!
Вы говорите, что пришли из другой сферы, ваш бизнес был как-то связан с дизайном?
Даже не бизнес, я вообще-то в адвокатуре работал, закончил юридический, но потом судьба меня свернула с этой дороги, работы не было. Ну я не то чтобы на хлебе и воде конечно, просто нашел альтернативный способ и мне такая работа нравится, я сейчас хочу прокачаться, до конца понять, изучить программы и посмотрим может сам что-то затею, но вот Дизкон я все равно оставлю! (смеется)
То есть можно сказать, что Дизкон вам помог?
Можно сказать, что Дизкон во мне открыл что-то творческое вообще!
Очень часто фрилансеры не воспринимаются всерьез, как вы считаете, у фриланса есть будущее? И помогают ли такие сайты ему развиваться?
Не вижу тут какой-то конкуренции. На мой взгляд это два разных рынка. Та клиентура, которая приходит в определенные агентства и для которой важно самоутвердиться, я мол именно это агенство выбираю, а не в какое-то там подешевле – к фрилансерам явно обращаться не будет. То, что вижу я: есть например дизайнер, занимается профессионально этой работой лет 15, за это время у таких профессионалов теряется полет, такая знаете девственность, идеи которые идут из души. Начинается механика – стабильная, на 4+, но все равно чего-то не хватает. А у фрилансера, особенно который только начинает, в таком расцвете, как я (смеется), я бы сказал еще что-то теплится, мозговые ресурсы еще не израсходованы, это другие совершенно ресурсы! Есть агентства которые родились, расцвели и засохли, а фриланс будет всегда – это рынок. Наверное так.
А чтобы вы посоветовали дизайнерам, которые не уверены стоит ли участвовать в конкурсах на Дизконе или считают, что это не оправдано?
Я когда первый раз участвовал в конкурсе, я думал: ну как у нас, не может же все гладко, обязательно сейчас какой-нибудь обман, лоховство. Смотришь комментарии, спрашивают «а что там правда деньги дают», я их понимаю, самому не верилось, а когда мне прислали выигрыш я, честно сказать, был приятно удивлен. Надо бы как-то это продвинуть – что бояться нечего – и здесь реально дают деньги за работу! Если у тебя есть время, если ты чувствуешь, что ты можешь попробовать, ну почему нет  - это же не мешки таскать! Фотошоп попробовать каждый может, у кого-то получается, у кого-то нет. Мы вот в рейтинге рядом с Маратом, (Марат Исмагилов – прим ред.)мы и помимо Дизкона с ним общаемся – он в здравоохранении работает, в Министерстве. Ну как говорится, где Министерство здравоохранения, а где Дизкон? Ну и посмотрите, что он делает – он убивает просто (смеется).
А как вы считаете в связи с нынешней кризисной ситуацией изменится ли как-то ситуация на сайте? Будет ли меньше заказов?
Не думаю! Во-первых, у вас цены несмертельные, во-вторых, как раз в этот период, как мне кажется, люди наоборот начинают дрожать за бизнес, начинают затыкать щели своей лодки, где что протекает, и в том числе, если у них логотип непривлекательный  - они тоже стараются как-то это исправить! Но в целом 50/50  - ситуация непредсказуема конечно.
 Беседовала Алина Мартьянова
1402400570small__3519404549

Шесть золотых правил дизайна в ИМ

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

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

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

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

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

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

1. Делайте корзину проще



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

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

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

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

2. Детализация покупок

Когда дело доходит до покупок, большое значение имеет то, как представлена информация о товаре —  это описание продукта, фото и видео. На самом деле 92,6% покупателей принимают решение о приобретении товара именно на основании визуального представления товара.

О чем это говорит?

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

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

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

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

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

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

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

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

3. Предоставьте пользователю возможность настроек



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

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

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

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

4. Внушить доверие



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

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

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

5. Соблюдайте линейность процесса покупки

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

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

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

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

6. Используйте простые формы



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

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

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

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

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

Вывод

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

Оригинал статьи на англ.: http://www.sitepoint.com/ecommerce-checkout-design-fundamentals/ 

header

Как создать простой эффект «схлопывания» шапки сайта

Дизайн в бизнесе

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

Эффект схлопывания/исчезновения хедера
На самом деле, как говорится все гениальное — просто. Данный эффект создается всего лишь двумя строками кода в CSS, а именно:
1. Нам необходимо зафиксировать позицию элементов header и banner с помощью свойства position:fixed.
2. И задать значение свойства z-index, которое и позволит получить такой вот необычный эффект «схлопывания» шапки сайта при прокручивании веб-страницы.
Итак, как это делается.

Начнем с того, что зафиксируем позицию шапки сайта в CSS. Также, хочу заметить, что подобные эффекты на сайтах лучше всего смотрятся, когда изображение на сайте занимает всю видимую область, поэтому первым делом нам необходимо установить значение ширины для хедера 100%: width:100%. Чтобы зафиксировать шапку нам необходимо прописать для нее свойство position: fixed. Подобное определение стиля позволит элементу оставаться на своем месте, в то время как остальная часть страницы будет прокручиваться «под нее»:
header {
            height: 100px;
            background: #bdbdbd;
            position: fixed;
            width: 100%;
            z-index: 10;
}
Следующим элементом в коде сайта у нас идет блок с баннером. Именно этот блок div banner у нас и будет восприниматься «схлопывающимся», хотя на самом деле, ничего необычного с ним мы не делаем. Положение этого блока нам также необходимо зафиксировать с помощью свойства position: fixed;. Для того, чтобы блок banner не прилипал к верхней части окна браузера зададим ему отступ от верхнего края в 100рх:
#banner {
            width: 100%;
            height: 300px;
            position: fixed;
            top: 100px;
            background: #707070;
}
Итак, мы подходим с завершающей стадии. Давайте окончательно зададим стиль для последнего блока content.
Первые два элемента header и banner у нас зафиксированы с помощью свойства position: fixed и стоят на своих местах. Поэтому для блока content нам необходимо задать относительное позиционирование и задать небольшой отступ от верхнего элемента.
#content {
            width: 100%;
            position: relative;
            top: 400px;
            background: #ebebeb;
            height: 1500px; /* Demo purposes */
}
И наконец, для получения эффекта «исчезновения» зададим свойства z-index для всех элементов. Для шапки сайта z-index должен иметь самое высокое значение по сравнению со всеми элементами — за счет этого, шапка сайта у нас остается все время видимой. А z-index для banner должен иметь самое низкое значение. Т.е., если резюмировать, то наша область с контентом content должна иметь значения свойства z-index, большее чем у баннера (за счет этого он его и перекроет), но меньшее чем у шапки (это позволит шапке оставаться все время видимой).
После того, как мы настроили позиционирование и прописали все свойства для наших элементов, можно заняться наведением красивостей, размещением текста и добавлением другой полезной информации. В частности, в данном примере, я добавил немного текста и прописал фото ночного неба над городом в область с баннером, взятое с Flickr (отдельное спасибо Кевину Дули!) — его я прописал в свойстве background и добавил свойство background-size: cover; для того, чтобы изображение заняло всю видимую область страницы в браузере.
Оригинал статьи: http://line25.com/tutorials/how-to-create-a-simple-collapsing-header-effect