Lecture 5.3: Design Heuristics (Part 2/2) (17:00)

Давайте продолжим наше путешествие этих дизайн эвристики.

Прежде чем мы делаем, я хотел бы напомнить вам, что многие из интерфейсов

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

и самое главное, чтобы определить проблемы:

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

Наша следующая эвристика — «признание за отзыв».

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

И один из моих любимых примеров этого [что] любое время вы видите пост-это к сведению

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

Вот фотография, которую я взял из одной из наших встреч обед.

И здесь вы можете увидеть у нас есть shwarma и фалафель.

Каждый из них имеют ряд на них.

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

И, конечно, причина этого заключается в том, что кто-то потратил все свое время, делая эти вкусные,

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

Так это понятно и поправимо.

Но, с точки зрения дизайна интерфейса, было бы быстрее найти курица shwarma

Если она была написана непосредственно на там, а также в коде.

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

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

Существует несколько проблем с точки зрения эвристики с этого экрана.

Для начала — и мы получим это немного — макет является своего рода по всей место.

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

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

Это, например, приносит вам на страницу

что предлагает вверх показывать время на сегодня и предлагает вам диалоговое окно переключиться в день.

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

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

Это снимок экрана веб-дизайн инструмента там, где есть много шаблонов.

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

Вы должны думать через ли это то, что вы хотите, и это трудно сделать надежно.

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

и это гораздо легче увидеть, если это дизайн, который вы хотели.

Далее, гибкости и эффективности.

Простой и прямой вперед пример этого

является обеспечение сочетания клавиш и подобные вещи как для экспертов.

Это меню Вид веб-браузера Firefox.

И это хороший пример того, предлагают гибкость и поддержка экспертов двумя способами.

Во-первых мы видим, что существует сочетания клавиш.

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

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

Это поиск отеля Expedia

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

Популярные города указаны с переключателем.

Но если вы хотите пойти в менее популярных город,

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

И так что это хороший пример по умолчанию с параметрами.

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

Это снимок экрана BusyCal,

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

Вот еще один пример производительности в пользовательском интерфейсе: это Google Gmail,

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

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

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

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

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

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

И поэтому здесь вы можете видеть, если вам нравится этот один напиток здесь, [есть] другие напитки, которые могут вас заинтересовать.

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

Это пример от Amazon, дискуссионных форумов для продуктов

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

И она просто отвлекает от пользователя главной цели — главным образом, они интересно

«Почему на земле эти вещи в конечном итоге в нижней части некоторых совершенно не веб-страницу?»

И наконец, [хотя] гибкость может быть невероятно ценные, это можно идти за борт.

Это фотография из Билл Moggridge, который показывает интервью с пользователем

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

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

Наши восьмой эвристического является «эстетические и минималистский дизайн.»

Когда люди просматривают веб-страницы, например, они просматриваете его на экране,

и так они видят не всю страницу, но стоит один экран на данный момент.

Что они видят, это то, что называется «верхней» — он приходит из газет.

Вот пример экрана где соответствующую информацию —

Каков прогноз погоды — даже не видна везде выше раза.

Все выше раза это все из хрома и дополнительные вещи,

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

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

было бы лучше иметь основную информацию выше раза.

Как мы будем говорить о в визуальный дизайн, если вы собираетесь использовать цвета и другие подсказки

у них что-то значить и делать так рассудительно.

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

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

И вот скриншот из Google в справочной системы.

Google часто воспринимается как пример минималистский дизайн, и они часто делают это очень хорошо.

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

или, скорее можно раздели некоторые больше шума.

И то, что я смотрю на в частности этот материал здесь,

где границы таблицы и другие вещи все то, что вы наиболее видеть,

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

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

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

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

потому что это прямо вверх вверх здесь, и тогда вы получите сказать

ли или не вы постоянный покупатель или нового клиента.

Если вы постоянный покупатель, вы вводите свой пароль; или если вы новый клиент,

как экран показывает здесь, вы создать новый пароль и введите его в и дальше от там.

Напротив, этот сайт Поиск рейса имеет ту же самую информацию —

Количество остановок — в двух отдельных мест.

И вполне возможно, что это увеличение ясности.

Однако стоимость сложности, и есть также стоимость вертикального экрана недвижимости,

где перечисляя такую же вещь дважды, вы выдвигаете другие вещи.

Часто, будучи динамических о том, что вам показать или выяснить, как показать вещи только один раз,

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

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

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

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

Но это не обязательно, что люди хотят.

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

Теперь это вид сайта, который вы войти в вероятно пару раз в год? [смеяться]

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

Следующая Давайте поговорим о помогая пользователям признать, диагностики и восстановления после ошибок.

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

Вот сайт бронирования отеля, где все он говорит это: «ошибка. месяц. назад".

Это трудно понять, что делать.

Вот один, что лучше, немного: это сайт регистрации для события.

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

Ладно это немного лучше. Но какие поля не заполнить вне?

Эта страница является и экраны длиной; Есть много и много вещей, которые должны быть проверены.

Какой из множества вещей на этой странице я забыл проверить?

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

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

Вот это диалоговое окно показывает ошибки и объясняет ясно,

но она не дает вам много в плане решения этой проблемы.

Он говорит, что нет достаточно места на вашем iPod. Очень плохо.

Более эффективным решением было бы предложить некоторые представление что принимает вверх все пространство,

или предложить разумные способы ограничения объема средств массовой информации

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

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

Распространенная ошибка в написании сообщений об ошибках – предложить одно диалоговое окно для всех возможностей.

Вот снимок экрана попытке открыть файл, где он не знает тип файла.

И он говорит, «приложение, что вы выбрали ('(null)'), не найти.

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

Ну это будет гораздо лучше, если мы говорили язык пользователя:

«Null» не может быть лучшим выбором.

А также если мы предложили разумные приложение для данного типа файлов.

Много общих задач в Интернете являются задач на основе поиска.

Так вот скриншот из поиска для полета,

где ограничение, заданное принесли никакого решения.

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

один из самых мощных вещей, которые вы можете сделать как дизайнер

– предложить релаксации этих ограничений, что делает это более работоспособным.

Много лет назад, я работал с богатыми Чак Mitsubishi исследований в Бостоне.

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

что бы найти способы разумно ослабить эти ограничения —

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

И этот вид смарт релаксации может быть действительно мощная техника.

Я хотел бы прекратить говорить об ошибках на хорошей ноте.

Вот веб браузера диалоговое окно, позволяет вам знать

Если вы идете на URL-адрес, который оно считает подозреваемого,

оно будет препятствовать вам знать, что вы, вероятно, не хотите быть здесь,

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

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

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

И это подводит нас к нашей последней эвристика, который является более справки и документации.

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

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

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

может помочь вам узнать систем программирования путем предоставления примеров.

Вот еще один пример driven стратегия UPS на веб-сайте.

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

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

на другом экране я группировать их здесь.

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

Это действительно мощный вид просмотра стратегии.

И вот пример диалоговое окно печати сказать вам, что проблема в том,

но не поможет вам найти решение.

Для начала я думаю, кто-то хочет знать, является то, что находится вне поля соответствующими?

Она только что официально вне поля, но ничего на самом деле получать отрезана?

или есть важные части документа, которые я заботиться о которые настоящее время отрезаны от страницы?

И что вы думаете, что наиболее разумный путь к решению этой проблемы?

Следует изменить размер страницы или ориентации, или переместить верхнего и нижнего колонтитула? Помогите мне решить!

Вот это диалоговое окно для фото функция слияния компании Adobe Photoshop Elements,

Это весьма прохладно функцию, если установить его прямо.

Однако вам нужно указать несколько фотографий в качестве входных данных из проекта Бен.

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

Он мог бы сказать Позвольте мне показать вам, затем она могла бы выделить проект бин на экране или что-то подобное.

Вот два скриншоты от eBay.

Слева у нас есть интересный подход, где eBay построил свою собственную внутренней системы обмена сообщениями.

И если, ради аргумента, мы решили, что это правильно сделать,

и это лучше, чем непосредственно в ответ на письмо внутреннего обмена сообщениями —

Я не уверен в этом, но мы будем идти с ним сейчас —

они сделали умный вещь, которая, когда вы отвечаете, ответ почтовый адрес говорит,

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

Это верно... Мне нужно использовать внутренней системы обмена сообщениями.»

Это интересно рубить.

И вот еще один скриншот с eBay, на правой стороне,

где когда введена новая функциональность —

например возможность сравнить несколько вариантов в вашей карточке —

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

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

является одним из наиболее интересных достижений в этой области.

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

И вот пример, который я думаю, это интересно.

Это диалоговое окно Отписка от списка рассылки

и если нажать кнопку «я получаю слишком много электронных почт»

Он говорит, «Подождите, вы можно изменить частоту»

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

Я думаю, что это на самом деле очень приятно решение,

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

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

и вы хотите, что вы могли бы просто быть сделано с этой задачей быстро,

но в любом случае, я думал, что это было интересным и творческие решения.

Я думаю, это действительно важно, помочь быть искренним,

и есть один класс помощь и дополнительная информация

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

и вот в EULA или лицензионные соглашения конечного пользователя.

Here're два примера EULA экранов, где это очень легко нажать через без когда-либо прочитать лицензионное соглашение.

И мой горб что почти все пользователи нажмите кнопку через не читая EULA.

Если никто не должен знать условия лицензионного соглашения, это очень разумно,

но мой горб что причина, по которой существуют эти вещи

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

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

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

не имея их ссылке или имеющих даже никогда не видел или читать лизать соглашения на всех.

И закрыть на позитивной ноте, одна славная вещь

что вы можете сделать с помощью на веб-сайте является помочь людям получить удовольствие.

Заполнение форм часто может быть очень скучно,

а вот пример из веб-сайт гостиницы, где один из параметров имеет немного пошутить внутри,

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