Между Лиц

Ну, что, ты определился, каким путем собрался #войтивайти — Хомячка или Джедая? На самом деле это риторический вопрос и сейчас совсем не важно, что ты ответишь. Ты все равно поспешишь установить Фотошоп или Скетч, и попробуешь что-то нарисовать и это «что-то» назовешь интерфейсом. Просто назовешь, ведь ты даже малейшего понятия не имеешь, что такое Интерфейс. И это твоя следующая ошибка — попытка создать «что-то», абсолютно не понимая сути создаваемых вещей.

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

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

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

Давай вместе разберемся, что такое Интерфейс.

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

Все еще сложно, да?

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

Ты считаешь, что Интерфейсы встречаются только на экранах гаджетов, но это не так!

Интерфейсы пришли в АйТи из аналогового (физического) мира привычных вещей.

itip-switch-sample
Кабельный Кнопочный Выключатель (слева) и его АйТи аналог — Свич-контрол (справа).

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

Давай я покажу тебе на примерах.

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

notebook-sample-1

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

notebook-sample-2

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

notebook-sample-3

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

notebook-sample-4

Как видишь, Интерфейс — это любой предмет, с которым взаимодействует человек. Абсолютно любой!

Основная задача Интерфейса — облегчить твою жизнь.

Теперь понимаешь, да?

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

Давай потренеруемся на практике.

Практическое задание №1:

  1. Приведи пример Интерфейса из реального мира
  2. Опиши, как выглядит эта вещь
  3. Опиши сценарий взаимодействия с этой вещью
  4. Свяжи между собой внешний вид и сценарий взаимодействия
  5. Предложи улучшения.

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

Референсы:

Хабрахабр

Книги

  • The Design of Everyday Things by Don Norman
  • About Face: The Essentials of User Interface Design by Alan Cooper
  • The Inmates Are Running the Asylum by Alan Cooper
  • The Humane Interface by Jef Raskin

2 Comments

  1. Mary

    1. Дверь с надписью вход/выход
    2. Прямоугольник вертикальный с табличкой в виде прямоугольника горизонтального в середине + слева по линии горизонта — кругляшок (ручка)
    3. Хватаешь ручку, толкаешь, оба прямоугольника делают одинаковое движение, дверь закрывается за тобой.
    4. Мы видим дверь глазами человека, который ее открывает. А можно посмотреть на это снизу вверх. Увидеть подошву, руку, тянущуюся к ручке двери, пересечение границы (порога) и дальнейший маршрут (и двери, и открывающего ее человека)

    Как вариант, ничего в этом не понимаю

    1. Дед Айтип

      Добрый вечер, Мэри.

      Дверь — отличный пример интерфейса привычных вещей. И не плохая попытка с вашей стороны его проанализировать, как для человека, который «ничего в этом не понимает».

      Но давайте я Вам немного помогу сделать это правильно.

      Итак — дверь. Вертикальный прямоугольник, приблизительный размер которого два с лишним метра по высоте и около метра по ширине. Здесь должны возникнуть вопросы, почему дверь в форме вертикального прямоугольника и почему у нее именно такие размеры? Чтобы это понять, нужно разобраться, как человек взаимодействует с дверью. Сценарий взаимодействия достаточно прост: открыть, пройти, если дверь без доводчика — закрыть. Как правило через двери проходят большое количество людей и все они разной высоты и комплекции (конституции). Проектировщику необходимо это учитывать, чтобы дверь была удобной для всех. Форма вертикального прямоугольника с размерами минимум 2х1 м наиболее подходящая для решения этой задачи. Еще полотно двери может открываться в разном направлении, возможны варианты: от себя, на себя или в обе стороны. Для быстрого понимания, в какую сторону открывается дверь, в интерфейс двери могут добавляться вспомогательные таблички: «На себя» или «От себя». Или еще можно ориентироваться по табличкам над дверью. Если вы видите надпись “Вход”, то скорее всего дверь открывается на себя, а при надписи “Выход” — от себя. Это связано с правилами пожарной безопасности — люди должны беспрепятственно покинуть помещение при пожаре, поэтому их путь сопровождается направляющими знаками, а двери должны открываться по ходу движения, то есть от себя. Вы правильно заметили, что в интерфейсе двери присутствует еще один предмет, который также является самостоятельным интерфейсом — дверная ручка, по виду и форме которой можно понять, в какую сторону открывается дверь…

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

Добавить комментарий