Что такое Веб-дизайн самых недооцененных слово в?

“ Affordance” является воспринимается сигнал или ключ, что объект может быть использован для выполнения того или иного действия.

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

Все объекты, которые окружают нас есть допустимости: некоторые явные (“Нажмите” знак над дверной ручкой), и другие скрытые (стул может быть использован, чтобы сломать окно или использовать в качестве оружия).Термин был впервые введен психологом Джеймсом Дж Гибсон, затем вводят в взаимодействие человека с компьютером Дональд Норман в своей книге Психология на каждый день Things 1 , обязательным чтением для начинающихпромышленные и продуктов дизайнеры во всем мире .

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

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

Можете ли вы рассчитывать количество действий пользователь может брать на Tumblr 2 ? С домашней страницы

tumblr-500px-opt 3

Хотя это, кажется, очень простой экран, вы можете удивляться тому, что одиннадцать действия возможны на домашнем page__14 Tumblr в |:

  1. Вход адрес электронной почты,
  2. Вход пароль,
  3. Щелкните значок со знаком вопроса (что приводит к экрану пароля восстановления),
  4. Нажмите «Войти» кнопки,
  5. Нажмите кнопку “Подписаться” ссылку,
  6. Нажмите кнопку “Условия” ссылку,
  7. Нажмите “Конфиденциальность” ссылку,
  8. Нажмите”Сообщение от blvcktrip” ссылку,
  9. Нажмите blvcktrip Аватар образ .
  10. Нажмите ‘ Поиск Tumblr’ вход field
  11. Жмём Enter для поиска введенного term

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

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

Явная Affordance

Явная Возможности сигнализирует языка или внешности объекта.Текст, который читает “Нажмите здесь” явно дает щелчок.Кнопка, которая появляется, вырученные от окружающей поверхности кажется тактильные и дает толкания.Дверная ручка с надписью “PUSH” над ней дает толкания.Поле ввода, который читает “Написать комментарий” явно дает комментарий пишется .

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

paypal-opt
Этот элемент пользовательского интерфейса на PayPal является хорошим примером явного Возможности.Поднял внешний вид кнопки дает нажимая.Текст явно сигнализирует результат действия .
video-opt
Это видео на Copyblogger 4 ‘Сайт использует явный Возможности с “нажмите, чтобы играть видео” Инструкция .

Явная Возможности особенно важно в следующих случаях:

  1. Когда пользователи интерфейс не похоже, чтобы были выставлены во многих моделей Возможности в pastЭто происходит чаще всего с пользователями, которые не технически подкованных или кто регулярно не взаимодействуют с веб-сайтов или мобильных интерфейсов.Эти пользователи имеют меньше шансов признать Возможности через шаблоны проектирования.Этоможет также верны и с уникальными или инновационных интерфейсов.Первые мобильные приложения сделаны интенсивное использование явного Возможности для таких действий, как нажав или отпечатков .
  2. При шаблоны не были созданы, чтобы сигнализировать Возможности Ан actionЭто может быть неясно, как визуально сообщить, что объект в мобильный интерфейс обеспечивает зажимая внутрь, чтобы закрыть и наружу, чтобы расширить.В этом случае, дизайнер, вероятно, использовать явное Возможности (т.е. путем добавления “ущипнуть, чтобы расширить” текст к объекту) .

Ли использовать явное Возможности зависит от контекста.Будучи слишком явное можно ввести избыточность в конструкцию.Если каждое звено гласит: “Нажмите здесь”, страница станет однообразной.Рассмотрим, насколько вероятно ваша аудитория поймет Возможности объекта без целенаправленного обучения.Например, пользователи приложение для технологий основателей стартапов, наверное, видели поле ввода раньше.Они могли бы чувствовать себя покровительствовал, если интерфейс инструктирует их __ 7 “Нажмите, чтобы ввести адрес электронной почты.” |

План Affordance

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

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

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

Вот мой список из рисунка эффордансы на домашней странице Envato Студии:

Element Возможности type Affords
Навигация bar Pattern Навигация по website
Links Pattern Clicking
Logo Pattern Возврат на главную page
Ссылка на верхнем правом corner Pattern Управляющий account
“Категории” капля-down Pattern Доступ к более options
Лупа icon Шаблонmetaphor Searching
Содержание modules Pattern Щелчок modules
envat_studio-500px-opt 5
Главная страница Envato Studio 6 , независимые рынке услуг, полна шаблонов эффордансы.Вы можете перечислить их все?( Просмотр большой version 7 )

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

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

Hidden Affordance

Тонкая форма, скрытая Возможности становится очевидным только один раз определенное условие было выполнено — например, текст ссылки, что дает мыши только тогда, когда она была наведении мышки на (и реагирует на изменения цвета).На устройстве IOS, каждый экран значки приложений дает время сильно ударил только тогда, когда вы постучал и потащил на главном экране.На Pinterest 9 8 , возлагали пункт дает favoriting только тогда, когда он завис над.По умолчанию, Возможности рамки элемента не видно до тех пор пока пользователь не принял какое-либо действие, чтобы активировать подсказку .

pinterest-unrevealed-opt
В предоставляемости изображений на Pinterest 9 8 скрыты по умолчанию и открывается только нанаведите .
pinterest-revealed-opt
После наведении мыши на элемент, три новые действия для этого элемента выявлены .

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

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

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

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

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

IPhone приложение, которое опирается на скрытую Возможности является Clear 10 , приложение к делу.Тем не менее, он был хвалили за его design 11 .

flat-design-clear-opt

Это красиво?Да.Тем не менее, он опирается в основном на скрытой Возможности.Когда вы тянете список элементов вниз, в верхней части экрана складывается, поручив “выдергивать создать элемент.” Разблокирование эти инструкции требуется экспериментов.Проводя слева удаляет элемент, не отрывая правильные помечает его как полный.Сжатие два пункта List Apart создает новый элемент между ними.Сжатие внутрь закрывает список .

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

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

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

Метафорический Affordance

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

cloud-opt

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

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

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.