Прототипирование *

Итак: требуется открыть .sketch-файл, созданный программой Sketch. Той самой, которая есть только на Mac’ах.

А Mac’a нет. Есть только Windows и этот дурацкий .sketch-файл, который кто-то прислал. И у этого кого-то Mac есть. А у тебя нет. Только Windows.

Введение

Эта статья о том, как набросать простенькую схемку из десятка элементов, когда под рукой нет ни Altium'а, ни Orcad'a, ни даже Visio, а Draw.io внезапно сломался.

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

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

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

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

Динамический прототип

Рис. 9. Демонстрация динамического прототипа для проекта «Маркетплейс».

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

Почти 4 года назад мы написали одну из самых популярных статей в рунете про проектирование больших проектов с таким же названием, как и эта: часть 1 и часть 2. Только на Хабре её прочитало более 170 тыс. человек, а вообще она публиковалась в самых разных изданиях мира. Более 1000 стартапов использовали наработки из этой статьи для проектирования, и это только те, о которых я слышал и которые нам писали. Но время не стоит на месте, а мы постоянно развиваемся. С тех пор наша технология проектирования значительно эволюционировала и стала еще лучше. В этой статье мы опишем нашу обновленную технологию проектирования и покажем много живых примеров для каждой стадии.

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

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

В статье рассмотрим один из методов качественного анализа – Метод тематических сетей:

— обсудим частые ошибки качественных исследований и вспомним «кальсонных гномов»;
— разберем пошаговый алгоритм метода и его возможные ловушки;
— применим метод к анализу ИТ-продукта и нарисуем тематическую карту.

Статья будет интересна:

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

Меня зовут Антон Шеин. Иногда я выступаю с докладами про дизайн, прототипирование и систематизацию интерфейсов.

После каждого доклада, раз за разом мне задают два основных вопроса:

1. Должен ли дизайнер уметь работать с веб-технологиями?
2. С чего дизайнеру начать, если хочется с ними разобраться?

Постараюсь ответить на них в этой статье.

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



Если кратко суммировать все преимущества, прототипирование позволяет:

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

На сегодняшний день на рынке представлено такое изобилие решений для прототипирования всевозможных видов софта, что сориентироваться среди них непросто. На Хабре можно найти обзоры о множестве подобных программ. Как и многие другие разработчики, мы долгое время держались проверенного решения — небезызвестного Moqups — жалея времени тестировать многочисленные альтернативы. На Make My App — инструмент, о котором пойдет речь в обзоре, мы вышли случайно, благодаря рекомендации со стороны: в списках мы этот продукт не находили. Ниже представляем небольшой обзор, по которому можно составить общее представление о функционале приложения.

Многие рассказываю о проектировании: как пользоваться Axure или Sketch, какие функции должен содержать сайт, как правильно спроектировать страницу товара. Это все, безусловно, очень полезно, но не показывает полную картину происходящего в проектировании. В интернете даже нет ни одного полного примера технического задания на проекты такого уровня. На самом деле, чтобы спроектировать большой сайт, нужно потратить сотни часов на исследования, прототипирование и разработку подробного ТЗ. В этой статье я впервые в рунете покажу все этапы проектирования и результаты по ним, полный динамический прототип (более 150 прототипов) и большое ТЗ (более 200 страниц описания). Все это мы будем делать на примере проектирования аналога крупнейшей в мире E-commerce площадки «Alibaba.com».

Никогда не поздно пить “Боржоми”. Даже если кажется, что RGB уже никогда не станет ярче, пользователи не начнут понимать тебя с полупикселя, а стену “ВКонтакте” никто возвращать не собирается. Выход есть — надо бежать!

Antoine Valot, эксперт по user experience из Щвейцарии, в своем блоге на Medium, опубликовал очень хорошую статью, максимально созвучную с моим практическим опытом. Решившись на адаптацию данного текста, я специально снабдил его собственными мыслями и поправками на российские реалии, так, чтобы статья не являлась бы дословным переводом, а скорее новым совместным произведением, раскрывающим некоторые секреты профессии UX.


Да, сегодня уже трудно удивить кого бы то ни было новой «очередной статьей про юзабилити», в которой в сотый раз будут сделаны все те же очевидные выводы: возлюби пользователя своего, да не будет у тебя аргументов иных кроме результатов тестирования, сотвори себе кумира из Джобса…

17 ноября в Москве в рамках Международной конференции мобильных разработчиков
MBLTdev 16 пройдет трек для дизайнеров мобильных приложений. На сайте уже опубликована предварительная программа трека. Выступать с докладами, проводить воркшопы
и ревьюить ваши приложения будут специалисты из ведущих продуктовых и сервисных компаний, а также преподаватели курса «Дизайн мобильных приложений» Британской высшей школы дизайна (БВШД).

«Бесчеловечный дизайн: как автоматизация забирает работу, славу и деньги у мобильных дизайнеров» расскажет директор курса «Дизайн мобильных приложений» БВШД Леонид Бугаев. Затем Павел Тепикин из SkyEng покажет историю экспериментов с конверсионной воронкой: от оформления приложения в App Store до первой оплаты пользователя.

Тут совсем недавно закончил редизайн для клиента, чье имя не последнее на поприще мобильного adblocking’a. Переделал им android-версию полностью по гайдам Google Material Design (далее GMD)… Разумеется пришлось капитально следовать инструкции. Чувства смешанные: вроде и трендово, а вроде и своих проблем хватает. Однако, я спокойно могу сказать про GMD — там есть, что переосмыслить и улучшить. Точно есть вещи, которые можно сделать удобнее. И вот, возможно, одна из них…

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

На встрече 26 октября в питерском офисе Wrike в рамках WrikeTechClub мы поговорим о том, как построить эффективную работу над юзабилити, как провести необходимые исследования и извлечь из них правильные выводы, как выявить фатальные ошибки и суметь их исправить в кратчайшие сроки, рассмотрим новые методологии и разберем с экспертами конкретные кейсы. На митапе выступит CEO и основатель компании Wrike Андрей Филев, который расскажет о последних изменениях облика Wrike в связи с современными тенденциями работы над IT-продуктом.

Привет, Хабр! Сегодня мы решили поделиться с сообществом текстовой версией одного из выпусков подкаста, в котором мы рассказали о работе над проектом «Дизайн государственных систем».

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

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

Итак, перед нами стоит задача: опираясь на готовые решения в открытом доступе, максимально оптимизировать затраченный труд на разработку приложения в стиле Google Material Design.

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

Все части статьи: 1 | 2 | 3 | 4 | 5 | 6

---

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

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

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

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

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