Пользователь
0,0
рейтинг
31 августа 2012 в 16:53

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

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





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



Любую идею нужно перевести в пользовательский интерфейс


Проектирование интерфейсов — это процесс. Всё начинается с идеи, но эту идею еще нужно перевести в пользовательский интерфейс. Недостаточно просто сказать «Я хочу приложение, которое делает X, Y и Z». Вы должны знать, что пользователь увидит на каждом экране приложения, чтобы сделать X, Y и Z. Создание эскиза спустит вас с небес на землю и позволит наконец-таки задуматься о пресловутом user experience. Вы уже знаете ЧТО вы хотите от вашего приложения, но создание эскиза поможет вам выяснить КАК приложение будет вести пользователей к желаемому результату. Эскизирование позволит вам визуализировать поведение пользователя. Таким образом ваша идея перестанет быть просто плодом вашего воображения и станет чем-то более значимым и доступным.



Эскиз — это не прототип и не схема


Многие дизайнеры и проектировщики ошибочно предполагают, что эскиз (sketch) — это схема интерфейса (wireframe) или прототип (prototype). Хоть они и правда в чём-то схожи, но по большому счёту это «три большие разницы». Все они преследуют одну цель — иллюстрирование концепта интерфейса и его поведения. Но эскиз, схема и прототип создаются в разных средах и приводят к разным результатам.



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

Проектируя схему интерфейса (wireframe), вы должны «вылизать» концепт приложения. Обычно для этого используются специальное ПО. Такая среда позволит вам более детально проработать концепт: размеры, расположение, порядок элементов и прочее. Также вы сможете тщательно обдумать все элементы на экране, а не только основные. Когда вы работаете «в пикселях», вы получаете более чёткое видение того как будет выглядеть и работать пользовательский интерфейс. После того как вы схематично спроектируете интерфейс, концепт станет гораздо яснее, чётче и совершеннее.

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

Эскиз всегда создаётся первым


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



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

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


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



Эскизы позволяют вам думать и работать быстрее


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



Эскизы делают схемы более детализированными и совершенными


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

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


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

Не стоит недооценивать эскизы


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

Update: по просьбам знающих людей поправил терминологию в соответствии с общепринятой у нас нормой. Например, вот хорошая статья, расставляющая все термины по полочкам.
@Johny_X
карма
8,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (52)

  • +2
    Смущает терминология: для меня прототип — это пачка уже сверстанных страничек, связанных ссылками, т.е. практически готовый сайт (без бекэнда). А то что у вас называется эскизами и прототипом есть условные макеты аки вайрфреймы, простые и детализированные (пусть в оригинале оно и называется скетчем).
    • +3
      Пачка уже сверстанных страничек — это готовая верстка. А прототип — это прототип, автор все четко описал. Для того что бы построить дом вы сначала построите стены а затем будете лить фундамент?
    • 0
      Насчёт перевода вы правы — я выбрал не самое удачное слово, для перевода термина «wireframe». Поправил на «схему интерфейса» и внёс соответствующие правки в иллюстрации.
  • +1
    Кстати, интересный подход у ребят из «37сигналов»: они пропускают этап условного макетирования, проектируя сразу в ХТМЛ.
    • 0
      «Каждый… как он хочет». Вот эти ребята начинают сразу с детализированных макетов, близких к финальному дизайну.

      Полная версия процесса такая: Sketch (наброски) > Wireframe (лейаут) > Prototype (интерактив) > Mockup (графика); в реальной жизни дизайнеры выбрасывают шаги по своему усмотрению.
      • 0
        Угу, интересно, ещё не читал.
    • 0
      Если я правильно вас понял, и вы имеете ввиду под термином «условное макетирование» то, что автор в статье называет терминами «эскиз», «прототип» (все-таки прочитав статью, в которой используются одни термины, и потом быстро переключиться на терминологию другую, не так уж и просто.В этом кстати ваша ошибка ИМХО, стоило бы принять конвенцию предложенную автором, хотя бы в пределах топика, чтобы не создавать дополнительных путаниц.) то этот комментарий, идет в прямой конфликт со статьей) И было бы правильней высказать несогласие с автором, чем показывать этот пример как «интересный»
      • 0
        От чего же, против статьи я не имею ничего против.
  • +2
    Дико извиняюсь, а что за устройство с гробом на второй картинке?
    • +2
      «Устройство» — это явно гидравлический механизм Давинчи… а вот как туда гроб затесался — это уже вопрос. тут оригинал
  • +1
    Согласен. Сейчас пишу новый проект, но решил вместо обычно «прыжка» на проект с «нахрапа», абы побыстрее, решил сначала продумать функционал максимально весь для первого милстоуна, примерно прикинуть задачи для последующих милстоунов. Уже(!) на этом этапе я изменил свое видение последовательности реализации функционала.

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

    Пару дней назад дошел до страницы, эскиза которой не было, и решил, да ладно, чего там… сделаю в том же стиле сразу верстку. Проковырялся полтора дня, и так не то, и эдак дерьмо (простите). Через силу взялся за эскиз, 20-30 минут, и через час задача полностью закончена.

    Так что, на бумаге это нужно делать. Легче.
  • +1
    Многие дизайнеры и проектировщики ошибочно предполагают, что эскиз — это прототип. Хоть они и правда в чём-то схожи, но по большому счёту это «две большие разницы». Оба эти понятия выполняют одну функцию — иллюстрирование концепта интерфейса.

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

    Эскиз не показывал, не показывает и не будет показывать проблемы использования. То, что кажется логичным и удобным на эскизе, в реальности может быть ужасно неудобным. Зачастую, рисование эскизов приводит к неоправданному усложнению интерфейсов.
  • НЛО прилетело и опубликовало эту надпись здесь
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      вот например: moqups.com
      • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Я пользуюсь www.hotgloo.com/. Мoqups пошустрее, но при ресайзе картинок нет привязки к сетке — это раздражает.
        • 0
          А нет, глюк был. После релоада нормально все.
  • 0
    делать эскизы — губить полёт души!
    • +1
      Правильно, лучше в этом полете 20 раз упасть, чем один раз нормально сесть )
  • 0
    Ещё бы почитать про документацию, в которой эскизы утверждаются. Иногда их называют «утверждение экранных форм», хотя это не одно и тоже.
  • 0
    > (из части об эскизах)… важно, чтобы команда проекта или клиент понимали базовую идею концепта проекта. Таким образом они смогут участвовать и пополнять концепт свежими мыслями.
    Если не секрет, каким софтом вы пользуетесь для хранения этих мыслей в наглядном виде? — Тех, которые изначально на эскизе, плюс подкинутые в процессе штурма. На листочке их, объективно, не удержать.
  • 0
    Эскизы это круто, но:
    1) только для себя, перед тем, как делать прототип. показывать кому-то эскизы значит рисовать их так же тщательно, как прототипы — это уже не эскиз.
    2) только для нестандартных проектов. к сожалению, как показывает моя практика проектировщика, таких процентов 10-20 среди заказов, не больше.
    • 0
      А в чем проблема показать набросок, ну т.е. почему его обязательно отрисовывать тщательно для этого?
      • 0
        Потому что если рисовать не тщательно, то ты не будешь красивым почерком подписывать какой-то квадратик со стрелочкой, чтобы стало понятно, что это видеролик… клиент же не угадает обычно :)

        Да, и прототипы наверное никто не «отрисовывает тщательно», это же прототипы. Вот прототип хабра можно за 10 минут накидать, главной страницы, довольно подробный.
        • 0
          Это момент подготовки, обучения клиента. Известны анекдотические случаи: «Мы заплатили деньги, а вы нам серые квадратики показываете?!»
          • 0
            Как не обучай, а чтобы клиент полностью понял эскиз — его нужно или рисовать на уровне Леонардо (при чем почерк должен быть лучше, чем у него) или тупо сопровождать большим количеством текста. Да и то может потребовать встреча/разговор по скайпу.

            Так что уже лучше прототипы.

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

            Да я в Axure сделаю прототип в 5 раз быстрее чем художник тот эскиз, что в статье как пример дан…
            • 0
              Трудности создания прототипа больше относятся к проектированию программных продуктов со сложным поведением. Особенно это касается игр.
              • 0
                Да, но ведь прототипы это не обязательно полностью готовые прототипы. Это могут быть прототипы прототипов так сказать.
  • +1
    Как раз недавно купил себе пастельные карандаши. Ими очень удобно рисовать схему, потому что толщина линий не дает сильно углубляться в подробности.
    image
    Единственное надо будет сетку точками напечатать, чтобы линии были ровнее и возможно линейку купить :)
    • 0
      Круто, но это же надеюсь для себя, а не клиенту показывать?
      • +2
        Разумеется для себя. Вот если под линейку и сеточкой то может и клиенту показать можно будет )
        Надо будет где-нибудь на лазернике напечатать штук 100
        image
        image
        image
        sneakpeekit.com/browser-sketchsheets/
        • +1
          • 0
            Если под линеечку, то теряется весь смысл, нет?
            • 0
              Нет, просто выглядит аккуратнее.
              • 0
                В смысле если под линеечку, то чем это лучше Axure?
                • 0
                  В той же Axure меня несет заниматься всякой фигней типа менять фон и настраивать размер шрифта.
                  Тут же проще.

                  Плюсом осознание того что поменять не можешь накладывает отпечаток.
                  А после уже — да, дорерисовываю в Axure/Hotgloo.
                  • 0
                    // Плюсом осознание того что поменять не можешь накладывает отпечаток. //

                    А этот отпечаток точно нужен, если делаешь набросок?
                    • 0
                      Это все субьективно. Но по крайней мере меня заставляет подумать :)
              • 0
                Блин не туда ответил: Да ладно...
  • 0
    Да ладно, неужели просто) то есть не теряется ни время, на оформление, ни сама затея, быстро записать мысль?)
    Вот автор например утверждает, что эскизы от прототипов, в том числе, отличаются тем, что бы оперативно переносить идеи из головы на другой хранитель информации, и быстро их корректировать)
    И я с ним согласен в том, что если буду брать в руки линейку и стараться сделать красиво, то вариант с «пропускать эскиз и делать сразу прототип» — ничуть не хуже), вернее ничем не отличается))
    Я понимаю, что можно сказать, а зачем эти эскизы, давайте сразу прототипы, но все-таки думаю все знакомо чувство, когда нужно выложить весь сумбур куда-то из головы, и посмотреть на него со стороны. А если начинаешь заморачиваться еще и над «формами», а не только над «содержанием», то первоначальная идея может очень быстро развеяться…
    • 0
      Ошибся веткой, ответ на: Нет, просто выглядит аккуратнее.
      • 0
        сумбурно получилось (
    • 0
      Просто ) Да вообще кому как удобно ) Я нашел что мне удобнее на бумаге. И весело.
      С линейкой — куплю, попробую насколько быстро будет.
      Без линейки по гайдлайнам уже получше:
      image
      • 0
        Вот внизу блок — это кнопка? Или что? Клиент точно спросит :)
        • 0
          Внизу кнопка. Да, надо будет купить еще разных цветов чтобы выделять как-то кнопки, допустим.
          А я уже выше писал, что это только для меня, и возможно, дизайнера.
  • +1
    Люди разные, думают по разному, и что хорошо для одних далеко не всегда подходит для других. С тех пор как я это понял, меня напрягают попытки выдать конкретный образ действий за панацею. А всего-то надо, вместо утверждения «все делайте так» писать что-то вроде «многом помогает, если начинают делать так»…
    • 0
      Ещё, как вариант, можно не напрягаться каждый раз, когда видите статью, описывающую какую-либо методологию, а говорить себе «Ок, мне это не подходит». ;-)

      Представьте себе, что эта статья о пользе молока. В каждом пункте статьи описываются преимущества его употребления. И эта статья будет являться благом, поскольку повысит мотивацию читателей питаться правильно. Однако, те, у кого непереносимость лактозы сами могут (и должны) сказать себе, что молоко им употреблять не стоит.
      • 0
        Я тут соционику исподтишка тонко пиарю, вы мне про молоко… ;)
  • 0
    Абсолютное большинство своих эскизов Леонардо не реализовал на практике.

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