Дизайнер интерфейсов обучение: Как стать дизайнером интерфейсов в 2020 (UPD 12/01/20)

Как стать дизайнером интерфейсов в 2020 (UPD 12/01/20) | by Inessa Shillo

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

Содержание

Базовые навыки:

Композиция и сетка
Типографика и работа со шрифтами

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

☝️ Работу с графическими редакторами я сейчас не рассматриваю: если вы еще не освоили Sketch/Figma/Experience Design/Invision Studio, то начните с этого.

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

Эти навыки универсальны и нужны любому дизайнеру, который работает в 2D пространстве. У графических дизайнеров ситуация лучше: многие проходят художественные школы и институты, есть более-менее сложившееся понимание, без чего в профессию нельзя точно. Для UI/UX дизайнеров это не так очевидно и много больше людей выходит из инженерных специальностей. Тем не менее, если вы хотите называться дизайнером_кой, базовые вещи знать надо.

🤷‍♀️ Я исхожу из своего опыта — в основном, работы в агентстве — поэтому какие-то вещи для дизайнера интерфейсов в продукте могут отличаться. Скорее всего, меня упрекнут, что я не говорю про основы UX, но я пишу статью чисто под свою агентскую боль: специалисты, которые приходят к нам, часто не владеют совсем уж простыми вещами. К разработке UX таких подпускать рано.

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

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

Чем занимается дизайнер интерфейсов и как им стать? — Академия Яндекса

Дизайнер анализирует сценарии поведения, чтобы разработать понятный и полезный интерфейс. Он продумывает, как пользователь будет взаимодействовать с продуктом. Мы поговорили с менеджером программы «Дизайнер интерфейсов» в Яндекс.Практикуме Еленой Чуйко о том, что важно в этой профессии.

Какие задачи решает дизайнер интерфейсов

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

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

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

Этапы работы и инструменты

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

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

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

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

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

Прототип нужно подготовить к разработке. На этом этапе дизайнер разрабатывает детализированный и интерактивный прототипы. Результат — готовый макет продукта, который можно передать разработчикам. Это визуализации экранов приложения или страниц сайта, где максимально понятно поведение каждого элемента. Например, определено, в каком случае всплывает подсказка и как кнопка реагирует на нажатие или жест.

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

Здесь происходит первое тестирование на реальных пользователях. Это помогает избежать лишних ошибок и вовремя поменять структуру, если понадобится. «Прототипы можно показать пользователям, это обязательно нужно делать, когда проектируешь какой-то новый или измененный сценарий. Тогда удастся заметить ошибки и не тащить их в разработку. Даже очень опытный дизайнер не всегда может предсказать, как поведут себя реальные пользователи. Поэтому уже после прототипирования надо показать им результат и спросить: «Что ты видишь? Как ты тут сделаешь заказ?» То есть нужно провести интервью или коридорное тестирование. Часто после этого этапа становится понятно, что надо переделать логику», — говорит Елена Чуйко.

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

Что нужно знать и уметь на старте

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

«Дизайнер не должен быть прослойкой между заказчиком и Figma (векторный редактор для дизайнеров интерфейса, работающий в браузере. — Прим. ред.). Задача дизайнера — помогать решать проблемы, а не просто рисовать красивые картинки. Поэтому важно уточнять задачу и докапываться до потребности», — говорит Елена Чуйко.

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

«Есть стереотип, что дизайнер должен уметь рисовать. На самом деле это не так. В работе дизайнера есть четкие правила. Новичкам часто кажется, что в дизайне много вкусовщины. Отчасти это так, но с опытом всё становится понятнее.

Дизайнеру нужно видеть закономерности, различать проблемы и пути их решения. Научиться отрисовывать макеты в специализированных инструментах можно самостоятельно, это не так сложно. А вот дизайнерскому мышлению лучше учиться на практике и с обратной связью от опытного наставника», — говорит Елена Чуйко.

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

Верстка. Для того, чтобы заниматься версткой, нужно познакомиться с HTML и CSS. Эти знания помогут определить, какие решения можно реализовать, а какие нет. «Работодатели ждут, что дизайнер сможет объяснить решение разработчику, —говорит Елена Чуйко. — Большинство работодателей считают, что дизайнеру не обязательно уметь верстать самому. Но даже начинающий специалист должен понимать, как в целом устроен цикл работы над диджитал-продуктом: какие дизайн-решения реализуются в разработке быстро и дешево, а какие придется долго и дорого программировать. Дизайнер знает, что красивый и аккуратный макет — это не конец работы. Результат — это продукт, поэтому важно убедиться, что разработчики смогут реализовать ваш дизайн в коде».

Инструменты. Стартовать будет проще, если вы быстро и уверенно ориентируетесь в графических редакторах. Неважно, в чём вы привыкли работать. Главное — готовность самостоятельно разобраться в новых инструментах, если понадобится.

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

Освойте дизайн интерфейсов в Яндекс. Практикуме

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

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

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

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

Фундамент дизайнера

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

Фокус, цели и задачи

Каждый дизайнер должен знать, для каких целей создается интерфейс и какие задачи он должен решать.

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

Цели и задачи — это не одно и тоже. У вас может быть цель хорошо провести вечер, а задача — выбрать между кино, рестораном и футболом.

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

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

Как бы это работало, если бы это было просто?

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

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

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

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

Эстетика интерфейса

Я люблю Medium за хорошую типографику и удобство написания статей, хотя на других ресурсах мои статьи порой набирают в два-три раза больше просмотров. Но дело ведь не только в красоте.

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

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

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

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

На русском языке можете прочитать емкий материал студии Олега Чулакова: design.chulakov.ru. Уверен, что на старте карьеры он бы мне очень помог.

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

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

Что ему нужно?

Хороший дизайнер думает сценариями, а не экранами.

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

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

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

Системность в дизайне

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

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

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

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

Даже хорошую идею легко убить

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

Лишь с опытом я понял, что вопросы, не касающиеся основной темы нужно игнорировать. Например, сказав: “Это лишь детали, поэтому давайте обсудим основные вещи, которые влияют на бизнес, а в конце вернемся к вашему вопросу”. Как ни странно, этот ответ избавляет вас от бесполезной беседы и представляет в виде профессионала, который заботится о бизнесе клиента, а не своем эго.

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

Книги для дизайнеров

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

Никакие.

Лишь регулярная практика и понимание бизнеса помогли мне приносить компании большую пользу и повысить свою ценность на рынке.

Идем дальше.

Куда устроиться

Есть три популярных варианта: студия, продукт или стартап.

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

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

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

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

Генерация удачи

[очень важная часть]

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

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

Среди этих действий есть активные и пассивные.

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

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

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

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

Павел Шумаков, выиграв Russian Design Cup получил предложение от ВКонтакте, а чуть позже перебрался в лондонский офис Badoo. Некоторые ребята, пройдя курс от Skillbox получили предложение о работе в AIC.

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

Ну и последнее.

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

Как зарекомендовать себя на новом месте

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

Это элементарная логика:

Успеха добиваются не те, кто не совершает ошибок, а те, кто несмотря на них идет вперед.

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

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

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

Неизбежный исход

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

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

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

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

Возможно, кто-то из вас захочет перейти на позицию продукт-менеджера и отвечать за коммуникацию между командами и стратегию развития проекта.

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

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

Ключ ко всему

Молодой дизайнер задал мне вопрос:

Лучше продолжить самообразование или поскорее устроиться на работу?

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

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

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

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

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

Терпение и упорство – ключ ко всему.

Сделайте эту неделю прорывной.

где учиться, зарплата, плюсы и минусы

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

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

Краткое описание

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

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

Особенности профессии

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

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

9 шагов как стать UX/UI дизайнером, если нет образования и опыта работы. | by Sati Taschiba

= Dare to dream BIG ⭐=

В последнее время ко мне очень часто пишут ребята с приблизительно одинаковыми вопросами:

Что можно посоветовать тому, кто хочет пройти подобный путь, как я, что рекомендую посмотреть, почитать, послушать и изучить?
Проходила ли я какие-либо курсы и если да, то как они мне помогли?
Какие навыки требуют в компаниях как Wargaming и пр.
Какую роль сыграло портфолио? Какие работы в нем преобладали?
Где найти работу (если нет ни образования ни опыта работы)?

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

По специальности я графический дизайнер и работала с такими компаниями как Montblanc, Dunhill, Saks Fifth Avenue и многие другие. Итого у меня в общем около 10 лет опыта работы в сфере дизайна. Спустя 7 лет работы графическим дизайнером я решила переквалифицироваться в дизайнера с уклоном на web-дизайн, говорю просто о вебе, так как в то время не было таких делений как UX, UI и другие. (Причиной смены сферы деятельности был интерес к новому направлению в дизайне, большей свободе выражения своих идей и как бы это не звучало типично- больший спрос на рынке и большие перспективы в долгосрочном плане).

Напишу сразу, что у меня, как и у многих из вас сейчас, кто читает эту статью не было опыта в работе над веб и мобильным дизайном. Единственное преимущество, что у меня было- это то, что я боле-менее владела фотошопом. У меня не было подобающего портфолио и опыта. Но спустя некоторого времени подготовки, я все же нашла первую работу, потом другую, потом следующую, пока меня не заметили в Wargaminge и не пригласили на позицию Senior Visual Designer.

P.S: Если вам интересно как я устроилась на работу в Германии и мои наблюдения о жизни и работе дизайнера в Берлине, добро пожаловать на мой канал в Youtube — Design Lead.

Ниже скидываю свое портфолио👇.

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

1. Поймите направления в дизайне

Самое ключевое для вас сейчас понять чем именно вы хотите заниматься? Многие мне пишут: “Хочу рисовать иллюстрации” и человек сам не знает, что за иллюстрации? Мультики или иконки или анимацию? Вы сами должны выбрать для себя то, что вы хотите. Никто не сделает это лучше вас.

Нравится работать над визуальной частью дизайна?- то вам в визуальные дизайнеры (UI).
Нравится продумывать саму логику работы продукта с пользователем, делать интерфейс удобным, анализировать, тестировать? — то вам в дизайнеры пользовательского опыта (UX).
Нравится делать и первое и второе, и углубляться глубоко в продукт, полностью быть хозяином продукта, знать и улучшать его — то вам в продуктовые дизайнеры.
Нравится верстать журналы, листовки, флайеры и другие POS-материалы, придумывать айдентику компании — то вам в графические дизайнеры .
и так далее… Есть и универсалы, которые знают всего понемногу. Начните с того, что бы выяснить, какая специализация вас интересует. Направлений очень много (!) ищите, то, что будет нравится именно вам и вы сможете посвятить этому уйму времени!

2. Изучите инструменты для работы

Я думаю, что далее объяснять не нужно. Как работать, если еще не освоили нужной программы? Вам повезло, если вы новичок, то вам не прийдется переучиваться с Adobe Photoshop и Illustrator, переходите сразу на Sketch или Figma. Почитайте в чем их различия, подумайте, что вы бы хотели изучить. Лайфхак от меня, если уже выбрали то направление в дизайне, по которому хотите идти, зайдите не поленитесь на Headhunter, Linkedin или любую другую платформу по поиску работ и посмотрите, что ищут работодатели, какие программы вы должны знать и пляшите уже от этой информации.

Здесь ниже свежие программы, которые могут пригодиться в работе:

Sketch для дизайна интерфейса
Figma для дизайна интерфейса с возможностью совместной работы
Balsamiq для создания макетов
Adobe XD для дизайна интерфейса, создания прототипов
Invision App для создания прототипов и совместной работы
RedPen для совместной работы

3. Начинайте обращать внимание на дизайн

До того как стать веб-дизайнером я совершенно не обращала внимание на структуру и содержание сайтов и мобильных приложений, не видела используемые цвета и шрифты, не замечала составляющие. Если вы решили стать дизайнером интерфейсов начинайте обращать внимание на всё и задавать себе вопросы: а почему они поставили логотип сюда, а не сюда? А почему кнопка одна и в конце, а не в начале? Изучите из чего обычно состоит сайт? (я говорю про элементарные вещи как header, body и footer). Задавая себе вопросы и отвечая на них, прокручивая варианты в голове, вы начнете не просто использовать сайт, а оценивать его с профессиональной точки зрения.

4. Окружите себя дизайном

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

Behance платформа-портфолио
Dribbble платформа-портфолио
Awwwards платформа-присуждающая звание лучших в веб-дизайне

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

5. Смотрите и повторяйте за другими

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

6. Найдите менторов и станьте менторами

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

Yury Vetrov дизайн директор @ Mail.Ru. Пишет о UX дизайне, создатель ежемесячного дизайн-дайджеста (можно найти в фб), ежедневно публикует тучу новых штук и новинок в дизайне
Tobias van Schneider был дизайнером Spotify. Еще делает кучу интересных вещей, пишет свой блог (где интересно почитать рубрики), даже кроссовки шьет
Alexander Kirov для мотивации почитайте его статьи про то как он нашел работу и уехал в США
Julie Zhuo вице-президент продукт дизайна facebook. Пишет свой блог о дизайне и о жизни.

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

7. Пройдите курсы

Многие задают вопрос нужны ли курсы? Есть разные типы личностей, кому-то интереснее и удобнее самому дома копаться в новой профессии, смотреть видео-ролики на ютубе, читать книжки и статьи. А кому-то нужно дизайн окружение и атмосфера. Если вы второй тип плюс у вас есть финансовые средства и время на прохождение курсов, то я скажу- да! Пройдите курсы! — это поможет. Только выбирайте курсы основательно, просмотрите комментарии и отзывы, посмотрите насколько популярна школа. Вот например список, что было в последнее время на слуху (сама эти курсы я НЕ проходила):

8. Читайте

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

Напишу лишь парочку книг, что меня вдохновили и возможно и вам они дадут ускорение:

“Выйди из зоны комфорта. Измени свою жизнь. 21 метод повышения личной эффективности” — Брайан Трейси

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

“Сожги свое портфолио! То, чему не учат в дизайнерских школах” — Майкл Джанда

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

“Кради как художник. 10 уроков творческого самовыражения” — Остин Клеон

Не нужно быть гением, достаточно быть самим собой! Эта книга родилась из лекции, с которой Остин Клеон выступил в одном Нью-Йоркском университете. Он дал студентам десять советов, которые хотел бы получить сам, когда был начинающим художником.

В мире нет ничего оригинального, поэтому не отвергайте чужое влияние, коллекционируйте идеи, обдумывайте их еще раз, аранжируйте по-новому в поисках собственного пути. Следуйте за своими интересами, куда бы они вас ни завели, и предоставьте свободу своему творческому «я»!

“Покажи свою работу! 10 способов сделать так, чтобы тебя заметили” — Остин Клеон

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

Профессия «UI-дизайнер» / «дизайнер интерфейсов»: полный обзор Профессии
Профессии в аналитике Профессии в дизайне Профессии в маркетинге Профессии в менеджменте Профессии в программировании Все Профессии
Кто такой UX-аналитик
18.07.2020
Профессии
Профессия Data-маркетолог: чем занимается специалист по дата-маркетингу, сколько…
14.07.2020
Профессии
Кто такой HR-аналитик
18.07.2020
Профессии в дизайне
Профессия «архитектурный визуализатор»: подробное описание и обзор
18.07.2020
Профессии в дизайне
Профессия «Дизайнер текстильного интерьера»: подробное описание и обзор
18.07.2020
Профессии в дизайне
Профессия «флорист»: подробное описание и обзор
18.07.2020
Профессии в дизайне
Профессия «фотограф»: подробное описание и обзор
16.07.2020
Профессии в маркетинге
Head of SMM: кто это и чем занимается,…
18.07.2020
Профессии в маркетинге
Профессия блогер: как использовать силу соцсетей для обогащения?
10.07.2020
Профессии в маркетинге
Кто такой директор по маркетингу
18.07.2020
Профессии в маркетинге
Профессия «контент-мейкер в спорте»: подробное описание и обзор
07.07.2020
Профессии в менеджменте
Мастер презентации и публичных выступлений: подробное описание и…
18.07.2020
Профессии в менеджменте
Профессия «руководитель отдела продаж»: подробное описание и обзор
18.07.2020
Профессии в менеджменте
Профессия «онлайн-преподаватель»: подробное описание и обзор
18.07.2020
Профессии в менеджменте
Специалист по управлению персоналом: какие функции выполняет, каким…
12.07.2020
Профессии в программировании
Кто такой BI-архитектор/BI-разработчик
18.07.2020
Профессии в программировании
Профессия «Go-разработчик»: подробное описание и обзор
18.07.2020
Профессии в программировании
Специалист по GIT: зачем нужна система управления версиями
08.07.2020
Профессии в программировании
Профессия VoIP-инженер: специалист по настройке IP-телефонии
18.07.2020
Профессии
Профессия «архитектурный визуализатор»: подробное описание и обзор
18.07.2020
Профессии
Кто такой BI-архитектор/BI-разработчик
18.07.2020
Профессии
Профессия «Дизайнер текстильного интерьера»: подробное описание и обзор
18.07.2020
Профессии
Мастер презентации и публичных выступлений: подробное описание и…
18.07.2020
Онлайн-курсы
Курсы для бизнеса Курсы по дизайну Курсы по маркетингу Курсы по программированию Все Курсы для бизнеса
Топ-10 курсов по управлению командами
30.06.2020
Курсы для бизнеса
Топ-12 курсы по управлению на Agile: Scrum, Kanban,…
30.06.2020
Курсы для бизнеса
Топ-10 курсов для финансистов
27.06.2020
Курсы для бизнеса
Топ-3 курса по работе с персоналом в спортивной…
27.06.2020
Курсы по дизайну
ТОП-8 курсов Tilda: создание сайтов с нуля
02.07.2020
Курсы по дизайну
Топ-11 курсов для 3D-дизайнеров
27.06.2020
Курсы по дизайну
Топ-10 курсов по ландшафтному дизайну
21.06.2020
Курсы по дизайну
Топ-6 курсов по сервисному дизайну
04.06.2020
Курсы по маркетингу
Топ-11 курсов по сквозной аналитике
15.07.2020
Курсы по маркетингу
Топ-9 курсов по контент-менеджменту
27.06.2020
Курсы по маркетингу
Топ-6 курсов для директоров по маркетингу
29.06.2020
Курсы по маркетингу
Топ-7 курсов по созданию спортивного контента
04.06.2020
Курсы по программированию
Топ-6 курсов для VR & AR-разработчиков
02.07.2020
Курсы по программированию
Топ-3 курса по компьютерному зрению (Computer Vision)
27.06.2020
Курсы по программированию
Топ-5 курсов по Power BI
25.06.2020
Курсы по программированию
Топ-10 курсов по тестированию мобильных приложений
05.06.2020
Онлайн-курсы
Летние скидки в Skillbox
09.07.2020
Онлайн-курсы
Топ-11 курсов по сквозной аналитике
15.07.2020
Онлайн-курсы
Топ-10 курсов по управлению командами
30.06.2020
Онлайн-курсы
Топ-12 курсы по управлению на Agile: Scrum, Kanban,…
30.06.2020
Рубрики
Soft Skills Аналитика Веб аналитика Базовые понятия Бизнес и управление Менеджмент проектов Продажи ВКонтакте Дизайн Бренд дизайн Веб-дизайн Графический дизайн Дизайн интерьеров Инстаграм Интернет-маркетинг Email-маркетинг SEO SMM Контекстная реклама (PPC) Копирайтинг Фриланс Программирование Все Soft Skills
«Google Таблицы»: гайд для простых людей
08.07.2020
Аналитика
Гайд по сервису Яндекс.Метрика: как настроить и не…
19.07.2020
Аналитика
Профессия аналитик: обязанности, зарплата, где учиться и как…
14.05.2020
Аналитика
Профессия Web-аналитик: кто такой и чем занимается, зарплата…
18.04.2020
Веб аналитика
Гайд по сервису Яндекс.Метрика: как настроить и не…
19.07.2020
Базовые понятия
Типизация в программировании или как выбрать свой язык
10.07.2020
Базовые понятия
Стоимость привлечения клиента (CAC): расчет и формулы
18.04.2020
Базовые понятия
Как рассчитать LTV: формула и пример расчёта жизненной…
18.04.2020
Базовые понятия
Что такое CPS (PPS): показатель, формула расчёта, модель…
18.04.2020
Базовые понятия
Что такое CTR: формула расчета, примеры и среднее…
18.04.2020
Базовые понятия
Какая формула расчета CPM в рекламе и маркетинге?
18.04.2020
Базовые понятия
Что такое CPC и какая формула расчета?
18.04.2020
Базовые понятия
Что такое CPA и какая формула расчета CPA…
24.04.2020
Бизнес и управление
Как составить коммерческое предложение, чтобы увеличить свои шансы
15.07.2020
Бизнес и управление
Ведение деловых переговоров: этапы, техники, лайфхаки
05.07.2020
Бизнес и управление
Лид-магнит: что это, основные виды + примеры и…
14.05.2020
Бизнес и управление
Сегментация целевой аудитории: Топ-5 методов
14.05.2020
Бизнес и управление
Что такое Call-to-action (CTA): виды призывов к действию…
22.05.2020
Бизнес и управление
Как определить целевую аудиторию для любой сферы
14.05.2020
Менеджмент проектов
Лид-магнит: что это, основные виды + примеры и…
14.05.2020
Менеджмент проектов
Сегментация целевой аудитории: Топ-5 методов
14.05.2020
Менеджмент проектов
Что такое Call-to-action (CTA): виды призывов к действию…
22.05.2020
Менеджмент проектов
Как определить целевую аудиторию для любой сферы
14.05.2020
Продажи
Как составить коммерческое предложение, чтобы увеличить свои шансы
15.07.2020
ВКонтакте
Таргетинговая реклама в социальных сетях: что это такое…
14.05.2020
ВКонтакте
Начало работы с дизайном интерфейса VR — Smashing Magazine
Виртуальная сфера — это неизведанная территория для многих дизайнеров. За последние несколько лет мы стали свидетелями -го взрыва оборудования и приложений виртуальной реальности (VR). Опыт VR варьируется от мирского до чудесного, его сложность и полезность сильно различаются.

Ваши первые шаги в VR как дизайнера UX или UI могут быть пугающими. Мы знаем, потому что мы были там. Но не бойся! В этой статье мы расскажем о процессе разработки приложений для виртуальной реальности, который, как мы надеемся, вы будете использовать для самостоятельного создания дизайна для виртуальной реальности.Вам не нужно быть экспертом в VR; вам просто нужно быть готовым применить свои навыки в новом домене. В конечном итоге, как сообщество, работающее вместе, мы можем ускорить виртуальную реальность, чтобы быстрее раскрыть весь свой потенциал.
Дополнительная информация о SmashingMag:
Какие существуют VR-приложения?
Вообще говоря, с точки зрения дизайнера, VR-приложения состоят из двух типов компонентов: сред и интерфейсов.
Вы можете думать об окружающей среде как о мире, в который вы входите, когда надеваете виртуальную гарнитуру — виртуальную планету, на которой вы находитесь, или вид с американских горок, на котором вы катаетесь.
Интерфейс — это набор элементов, с которыми пользователи взаимодействуют для навигации по среде и управления своим опытом. Все приложения виртуальной реальности могут быть расположены вдоль двух осей в зависимости от сложности этих двух компонентов.
(Просмотр большой версии)
В верхнем левом квадранте есть такие вещи, как симуляторы, например, опыт американских горок, связанный с выше. У них полностью сформированная среда, но нет интерфейса вообще. Вы просто заперты для поездки.
(Просмотреть большую версию)
В противоположном квадранте находятся приложения, которые имеют развитый интерфейс, но мало или вообще не имеют среды.Домашний экран Samsung Gear VR является хорошим примером.
(Просмотреть большую версию)
Проектирование виртуальных сред, таких как места и ландшафты, требует мастерства с инструментами трехмерного моделирования, что делает эти элементы недоступными для многих дизайнеров. Тем не менее, у разработчиков UX и UI есть огромная возможность применить свои навыки при разработке пользовательских интерфейсов для виртуальной реальности (или, для краткости, виртуальных интерфейсов VR).
Первым разработанным нами полным интерфейсом VR был приложение для The Economist, созданное в сотрудничестве со студией VR VR Visualize.Мы сделали дизайн, в то время как Visualize создал контент и разработал приложение.
(Большой предварительный просмотр)
Мы будем использовать это в качестве рабочего примера в следующем разделе, в котором мы изложим подход к разработке приложений VR, прежде чем углубляться в тщательную разработку интерфейсов для VR. Вы можете скачать приложение Economist для Gear VR с веб-сайта Oculus.
A Процесс проектирования пользовательского интерфейса VR
В то время как большинство дизайнеров выяснили свой рабочий процесс для разработки мобильных приложений, процессы для проектирования интерфейсов VR еще не определены.Когда первый дизайн-проект VR-приложения появился у нас, логичным первым шагом для нас было разработать процесс.
Традиционные рабочие процессы, новая территория
Когда мы впервые играли в Gear VR от Samsung, мы заметили сходство с традиционными мобильными приложениями. Интерфейсные VR-приложения работают в соответствии с той же базовой динамикой, что и традиционные приложения: пользователи взаимодействуют с интерфейсом, который помогает им перемещаться по страницам. Здесь мы упрощаемся, но пока имейте это в виду.
Учитывая сходство с традиционными приложениями, проверенные и проверенные рабочие процессы мобильных приложений, которые дизайнеры потратили годы на доработку, не будут потрачены впустую и могут использоваться для создания виртуальных интерфейсов пользователя.Вы ближе к разработке приложений VR, чем вы думаете!
Прежде чем описывать, как создавать интерфейсы виртуальной реальности, давайте вернемся назад и рассмотрим процесс разработки традиционного мобильного приложения.
1. Каркасы
Сначала мы пройдем быстрые итерации, определив взаимодействия и общий макет.
(Просмотреть большую версию)
2. Визуальный дизайн
На этом этапе функции и взаимодействия были утверждены. В отношении каркасов теперь применяются фирменные правила, и создан красивый интерфейс.
(Просмотреть большую версию)
3. План
Здесь мы организуем экраны в потоки, рисуя ссылки между экранами и описывая взаимодействия для каждого экрана. Мы называем это планом приложения, и оно будет использоваться в качестве основного справочника для разработчиков, работающих над проектом.
(Просмотреть большую версию)
Теперь, как мы можем применить этот рабочий процесс к виртуальной реальности?
Настройка
Размер холста
Самые простые проблемы могут быть самыми сложными. Столкнувшись с холстом на 360 градусов, может быть трудно понять, с чего начать.Оказывается, что дизайнерам UX и UI нужно сосредоточиться только на определенной части общего пространства.
Мы потратили недели, пытаясь выяснить, какой размер холста будет иметь смысл для виртуальной реальности. Когда вы работаете с мобильным приложением, размер холста определяется размером устройства: 1334 × 750 пикселей для iPhone 6 и примерно 1280 × 720 пикселей для Android.
Чтобы применить этот рабочий процесс мобильного приложения к интерфейсам виртуальной реальности, сначала необходимо определить размер холста, который имеет смысл.
Ниже показано, как выглядит окружающая среда на 360 градусов при выравнивании.Это представление называется равносторонней проекцией. В виртуальной трехмерной среде эти проекции обернуты вокруг сферы, имитируя реальный мир.
(Просмотр большой версии)
Полная ширина проекции составляет 360 градусов по горизонтали и 180 градусов по вертикали. Мы можем использовать это, чтобы определить размер пикселя холста: 3600 × 1800.
(Просмотр большой версии)
Работа с таким большим размером может быть сложной задачей. Но поскольку нас в первую очередь интересует аспект интерфейса VR-приложений, мы можем сосредоточиться на сегменте этого холста.
Опираясь на ранние исследования Майка Алжера, касающиеся удобных областей просмотра, мы можем выделить часть, где имеет смысл представить интерфейс.
Область интересов представляет одну девятую из 360-градусной среды. Он расположен прямо в центре равностороннего изображения и имеет размер 1200 × 600 пикселей.
(Просмотреть большую версию)
Подведем итог:
« 360 View »: 3600 × 1800 пикселей
« UI View »: 1200 × 600 пикселей
(Просмотреть большую версию)
Тестирование
The Причиной использования двух холстов для одного экрана является тестирование.Холст «UI View» помогает сфокусироваться на интерфейсе, который мы создаем, и облегчает проектирование потоков.
Между тем, «360 View» используется для предварительного просмотра интерфейса в среде VR. Чтобы получить реальное представление о пропорциях, необходимо протестировать интерфейс с виртуальной гарнитурой.
Используя Avocode, вы можете легко визуально сравнить ревизии проектов.
Инструменты
Прежде чем мы начнем с пошагового руководства, вот инструменты, которые нам понадобятся:
Sketch Мы будем использовать Sketch для разработки наших интерфейсов и пользовательских потоков.Если у вас его нет, вы можете загрузить пробную версию. Sketch — это наше предпочтительное программное обеспечение для проектирования интерфейсов, но если вам удобнее пользоваться Photoshop или чем-то еще, это тоже подойдет.
GoPro VR Player GoPro VR Player — 360-градусный просмотрщик контента. Он предоставляется GoPro и является бесплатным. Мы будем использовать его для предварительного просмотра наших проектов и проверки их в контексте.
Подключение Oculus Rift Установка Oculus Rift в GoPro VR Player позволит нам протестировать дизайн в контексте.
A Процесс проектирования интерфейса VR
В этом разделе мы рассмотрим краткое руководство по разработке интерфейса VR.Мы вместе разработаем простой, который займет пять минут.
Загрузите пакет ресурсов, который содержит предварительно созданные элементы пользовательского интерфейса и фоновое изображение. Если вы хотите использовать свои собственные активы, сделайте это; это не будет проблемой.
1. Настройка «360 View»
Перво-наперво. Давайте создадим холст, который будет представлять 360-градусный обзор. Откройте новый документ в Sketch и создайте монтажную область: 3600 × 1800 пикселей.
Импортировать файл с именем background.JPG , и поместите его в середине холста. Если вы используете свой собственный прямоугольный фон, убедитесь, что его пропорции составляют 2: 1, и измените его размер до 3600 × 1800 пикселей.
(Просмотр увеличенной версии)
2. Настройка Artboard
Как упоминалось выше, «UI View» — это урезанная версия «360 View» и ориентирована только на интерфейс VR.
Создайте новый артборд рядом с предыдущим: 1200 × 600 пикселей. Затем скопируйте фон, который мы только что добавили, в наш «360 View» и поместите его в центр нашего нового артборда.Не меняйте размер! Мы хотим сохранить обрезанную версию фона здесь.
(Просмотреть большую версию)
3. Разработка интерфейса
Мы собираемся разработать интерфейс на холсте «Вид интерфейса». Ради этого упражнения мы сделаем все просто и добавим ряд плиток. Если вам лень, просто возьмите файл с именем tile.png в пакете ресурсов и перетащите его в середину представления пользовательского интерфейса.
Дублируйте его и создайте ряд из трех плиток.
Grab кикпуш-логотип.png из пакета активов и поместите его над плитками.
(Просмотр большой версии)
Выглядит неплохо, а?
4. Слияние артбордов и экспорта
Теперь самое интересное. Убедитесь, что артборд «UI View» находится над артбордом «360 View» в списке слоев слева.
Перетащите артборд «UI View» в середину артборда «360 View». Экспортируйте артборд 360 View в формате PNG; «UI View» будет поверх него.
(Просмотреть большую версию)
5. Протестируйте его в VR
Откройте GoPro VR Player и перетащите PNG «360 View», который вы только что экспортировали, в окно.Перетащите изображение с помощью мыши, чтобы просмотреть окружение на 360 градусов.
Мы сделали! Довольно просто, когда знаешь как, верно?
Если на вашем компьютере настроен Oculus Rift, то GoPro VR Player должен обнаружить его и позволить вам предварительно просмотреть изображение с помощью вашего устройства VR. В зависимости от вашей конфигурации вам, возможно, придется возиться с настройками дисплея в MacOS.
(Просмотреть большую версию)
Технические вопросы
Низкое разрешение
Разрешение гарнитуры VR довольно плохое.Ну, это не совсем так: это эквивалентно разрешению вашего телефона. Однако, учитывая, что устройство находится в 5 сантиметрах от ваших глаз, дисплей не выглядит четким.
Чтобы получить четкое впечатление от виртуальной реальности, нам понадобится 8K-дисплей на глаз. Это дисплей с разрешением 15 360 × 7680 пикселей. Мы довольно далеки от этого, но в конце концов доберемся.
Читабельность текста
Благодаря разрешению экрана все ваши красивые четкие элементы пользовательского интерфейса будут выглядеть пиксельными. Это означает, во-первых, что текст будет трудным для чтения и, во-вторых, будет высокий уровень наложения прямых линий.Старайтесь избегать использования больших текстовых блоков и очень подробных элементов пользовательского интерфейса.
Последние штрихи
Blueprint
Помните план нашего процесса разработки мобильных приложений? Мы адаптировали эту практику к интерфейсам VR. Используя наши представления пользовательского интерфейса, мы отображаем и систематизируем наши потоки в понятный проект, идеальный для разработчиков, чтобы понять общую архитектуру приложения, которое мы разработали.
(Просмотр большой версии)
Motion Design
Создание красивого пользовательского интерфейса — это одно, а показ того, как он должен анимироваться, — это отдельная история.Еще раз, мы решили подойти к этому с двухмерной точки зрения.
Используя наши эскизы, мы анимируем интерфейс с помощью Adobe After Effects и Principle. Хотя результат не является трехмерным, он используется в качестве руководства для команды разработчиков и помогает нашим клиентам понять наше видение на ранней стадии процесса.
Вы только что создали свой первый виртуальный интерфейс пользователя. Проверьте вас! Попа жми.
Мы знаем, о чем вы думаете: «Это круто, но приложения VR могут усложнить , а — сложнее.» Да, они могут. Вопрос в том, в какой степени мы можем применить наши текущие практики UX и UI к этой новой среде?
Как далеко могут зайти виртуальные интерфейсы VR?
Inter-Your-Faces
Некоторые виртуальные среды настолько сильно зависят от виртуальной среды, что традиционный интерфейс, расположенный на вершине, не может быть оптимальным способом управления приложением для пользователя. В этом случае вы можете захотеть, чтобы пользователи напрямую взаимодействовали с самой средой.
Представьте, что вы создаете приложение для роскошного турагента.Вы бы хотели доставить пользователя к потенциальным местам отдыха самым ярким из возможных способов. Итак, вы приглашаете пользователя надеть гарнитуру и начать работу в своем шикарном офисе в Челси.
Чтобы перейти из офиса в какое-то отдаленное место, пользователь должен выбрать, куда он хочет пойти. Они могут взять журнал о путешествиях и пролистать его, пока не окажутся на привлекательной странице. Или на вашем столе может быть коллекция интересных предметов, которые перемещают пользователя в разные места, в зависимости от того, какой из них он подбирает.
Это определенно круто, но есть некоторые недостатки. Чтобы получить полный эффект, вам понадобится более совершенная виртуальная гарнитура с портативными контроллерами. Кроме того, подобное приложение требует гораздо больше усилий для разработки, чем набор хорошо представленных опций, организованных как в традиционном интерфейсе приложения.
Viva la Revolución!
Реальность такова, что эти погружения не являются коммерчески жизнеспособными для большинства компаний. Если у вас нет практически неограниченных ресурсов, таких как Valve и Google, создание опыта, подобного описанному выше, возможно, слишком дорого, слишком рискованно и отнимает много времени.
Этот опыт отлично подходит для демонстрации того, что вы находитесь на переднем крае медиа и технологий, но не настолько хорош для вывода вашего продукта на рынок через новую среду. Доступность важна.
Обычно, когда появляется новый формат, его толкают до предела ранние последователи: создатели и новаторы этого мира. Со временем и при достаточном обучении и инвестициях он становится доступным для более широкого круга потенциальных пользователей.
По мере того, как VR-гарнитуры становятся все более распространенным явлением, компании начинают находить возможности для интеграции VR в способы взаимодействия с клиентами.
С нашей точки зрения, приложения виртуальной реальности с интуитивно понятным пользовательским интерфейсом, то есть интерфейсом, более близким к тому, к которому люди уже привыкли с их носимыми устройствами, телефонами, планшетами и компьютерами, — это то, что сделает VR доступным и выгодным вложением для большинства компаний, которые преследовать это.
Время взлететь на борт Rocketship
Мы надеемся, что в этой статье мы сделали пространство VR менее пугающим и вдохновили вас самим начать разработку VR.
Говорят, что если хочешь путешествовать быстро, иди один.Но если вы хотите путешествовать далеко, путешествуйте вместе. Мы хотим путешествовать далеко. В Kickpush мы думаем, что когда-нибудь у каждой компании будет приложение для виртуальной реальности, точно так же, как у каждой компании теперь есть мобильный веб-сайт (или должен быть — это 2017, черт побери!).
Итак, мы строим ракетный корабль, совместные усилия дизайнеров по всему миру, чтобы смело идти туда, куда раньше не ездил ни один дизайнер. Чем скорее создание VR-приложений будет иметь смысл для компаний, тем быстрее взорвется вся экосистема.
Наши следующие задачи как разработчиков цифровых продуктов — это более сложные приложения и обработка других типов ввода через контроллеры.Чтобы начать заниматься этим, нам понадобятся надежные инструменты для создания прототипов, которые позволят нам быстро и легко создавать и тестировать проекты. Мы напишем последующую статью, в которой рассматриваются некоторые ранние попытки сделать это, а также некоторые новые инструменты в разработке.
Оставайтесь с нами!
Полезные ссылки
(км, ил, ал).
Что такое дизайн пользовательского интерфейса?
Научитесь проектировать с учетом потребностей и ожиданий вашего пользователя, применяя Десять руководящих принципов по пользовательскому интерфейсу Якоба Нильсена и Рольфа Молича. Эти эвристики нашли отражение во многих продуктах, разработанных некоторыми из самых успешных компаний в мире, таких как Apple, Google и Adobe. Дальнейшее свидетельство того, как их проектные группы включают эти правила в процесс проектирования, отражено в руководствах по пользовательскому интерфейсу, опубликованных и распространенных этими компаниями.Эта статья научит вас, как следовать десяти основным правилам в вашей работе над дизайном, чтобы вы могли еще больше повысить удобство использования, полезность и желательность ваших проектов.
Nielsen и 10 руководств по проектированию пользовательского интерфейса Molich
Якоб Нильсен, известный консультант по веб-юзабилити и партнер в группе Nielsen Norman, и Рольф Молич, еще один выдающийся эксперт по юзабилити, в 1990-х годах составили список из десяти руководств по разработке пользовательского интерфейса. Заметьте, что существует значительное совпадение между эвристикой Нильсена и Молича и «восемью золотыми правилами» Бена Шнейдермана.Эти 10 практических правил еще раз повторяют восемь золотых правил Шнейдермана через 4 года после первоначальной публикации Шнейдермана.
Видимость состояния системы . Пользователи всегда должны быть проинформированы о работе системы с понятным и хорошо видимым статусом, отображаемым на экране в течение разумного периода времени.
Матч между системой и реальным миром . Дизайнеры должны стремиться отразить язык и концепции, которые пользователи найдут в реальном мире, исходя из того, кем являются их целевые пользователи.Представление информации в логическом порядке и совмещение ожиданий пользователей, основанных на их реальном опыте, уменьшит когнитивное напряжение и облегчит использование систем.
Пользовательский контроль и свобода . Предложите пользователям цифровое пространство, в котором возможны шаги назад, включая отмену и повтор предыдущих действий.
Соответствие и стандарты . Разработчики интерфейса должны убедиться, что графические элементы и терминология поддерживаются на одинаковых платформах.Например, значок, представляющий одну категорию или концепцию, не должен представлять другую концепцию при использовании на другом экране.
Предотвращение ошибок . По возможности проектируйте системы так, чтобы потенциальные ошибки были сведены к минимуму. Пользователям не нравится, когда их заставляют обнаруживать и устранять проблемы, которые могут иногда выходить за рамки их уровня знаний. Исключение или пометка действий, которые могут привести к ошибкам, являются двумя возможными способами предотвращения ошибок.
Признание, а не отзыв. Минимизируйте когнитивную нагрузку, сохраняя релевантную информацию на дисплее, пока пользователи изучают интерфейс. Человеческое внимание ограничено, и мы способны хранить только около пяти элементов в нашей краткосрочной памяти за один раз. Из-за ограничений кратковременной памяти разработчики должны обеспечить, чтобы пользователи могли просто использовать распознавание, а не вызывать информацию из разных частей диалога. Распознать что-либо всегда легче, чем вспомнить, потому что распознавание включает в себя восприятие сигналов, которые помогают нам проникнуть в нашу обширную память и позволяют всплыть соответствующей информации.Например, мы часто находим формат вопросов с несколькими вариантами ответов проще, чем вопросы с короткими ответами на тесте, потому что он требует от нас только распознать ответ, а не вспомнить его из нашей памяти.
Гибкость и эффективность использования . С увеличением использования появляется потребность в меньшем количестве взаимодействий, которые обеспечивают более быструю навигацию. Это может быть достигнуто с помощью сокращений, функциональных клавиш, скрытых команд и макросов. Пользователи должны иметь возможность настраивать или адаптировать интерфейс в соответствии со своими потребностями, чтобы частые действия можно было выполнить с помощью более удобных средств.
Эстетичный и минималистский дизайн . Держите беспорядок к минимуму. Вся ненужная информация конкурирует за ограниченные ресурсы внимания пользователя, которые могут препятствовать извлечению в памяти пользователем соответствующей информации. Поэтому отображение должно быть сведено только к необходимым компонентам для текущих задач, в то же время предоставляя четко видимые и однозначные средства навигации по другому контенту.
Помогите пользователям распознавать, диагностировать и устранять ошибки .Разработчики должны исходить из того, что пользователи не могут понять техническую терминологию, поэтому сообщения об ошибках почти всегда должны быть изложены простым языком, чтобы при переводе ничего не терялось.
Справка и документация . В идеале мы хотим, чтобы пользователи перемещались по системе, не прибегая к документации. Однако, в зависимости от типа решения, может потребоваться документация. Когда пользователям требуется помощь, убедитесь, что она легко определена для конкретной задачи и сформулирована таким образом, чтобы помочь им выполнить необходимые шаги для решения стоящей перед ними проблемы.
Google Inc., многомиллиардная технологическая компания, безусловно, производит проекты, отражающие вышеуказанную эвристику. Джон Уайли, главный дизайнер Google Search в 2012 году, однажды сказал:
«Когда я думаю о дизайне и создании отличного пользовательского опыта, я обычно думаю о нем с точки зрения трех вещей: удобство использования, полезность и желательность».
Nielsen и Molich 10 руководств по пользовательскому интерфейсу довольно хорошо охватывают эти три ключевых компонента взаимодействия с пользователем, что означает, что вы, вероятно, сможете улучшить пользовательский опыт ваших проектов, следуя этим рекомендациям!
Узнайте, как Adobe интегрирует десять руководств по проектированию пользовательских интерфейсов Nielsen и Molich
Adobe Systems Incorporated, крупная североамериканская компания по разработке компьютерного программного обеспечения, является отличным примером того, как проекты, отражающие десять руководств по пользовательскому интерфейсу Nielsen и Molich, могут привести к успеху для компании ,Один из их самых популярных продуктов, Adobe Photoshop, который является редактором растровой графики, обладает характеристиками хорошо разработанного пользовательского интерфейса, отражающего эти рекомендации.
Мы более подробно рассмотрим, как Adobe Photoshop отражает каждое из этих руководящих принципов, чтобы вдохновить вас на повышение удобства использования, полезности и желательности ваших собственных дизайнов, включив 10 правил практического применения в вашу собственную работу.
1. Видимость состояния системы
Photoshop отлично информирует пользователя о том, что происходит с программой, визуально показывая, к чему привели его действия, когда это возможно.Например, когда пользователи перемещают слои в палитре слоев, они могут визуально видеть представленный слой как физически перетаскиваемый в пространстве.
Автор / правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: добросовестное использование
Графический курсор переходит от представления открытой руки к сжатой руке, когда пользователь перетаскивает слой в палитре слоев. Это облегчает мгновенное понимание состояния системы.Кроме того, выбор Adobe «руки» является отличным примером второй рекомендации, когда система соответствует реальному миру.
2. Соответствие системы реальному миру
Пример Photoshop, имитирующий реальный мир в терминах и представлениях, которые будут понятны их целевым пользователям, — это то, где они разрабатывают информационную структуру и терминологию для отражения той же формулировки, которую мы использовали бы в мир фотографии или печатных СМИ. Для представления цвета используются знакомые понятия и термины, такие как RGB, Hue / Saturation / Brightness и CMYK, а различные инструменты, такие как инструмент Dodge и Burn, имитируют традиционную технику темной комнаты для фотографий.
Автор / правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: добросовестное использование
Photoshop Dodge Tool и Burn Tool имитируют традиционную технику фотолаборатории для фотографий
Автор / правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: добросовестное использование
В Photoshop используется термин «Экспозиция», который широко используется в мире фотографии.
3. Пользовательский контроль и свобода
Photoshop очень хорош в предоставлении пользователям контроля на каждом этапе пути. Когда пользователь вносит изменения в изображение или добавляет различные художественные эффекты, он может быстро и легко сделать шаг назад, если он допустит ошибку, например.
Автор / правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: добросовестное использование
Пользователи находятся под контролем, так как они могут сделать шаг назад или шаг вперед в меню «Правка», или в качестве альтернативы они могут использовать сочетания клавиш Photoshop, например, такие как Alt + Ctrl + Z.
4. Согласованность и стандарты
Photoshop поддерживает стандартную компоновку и внешний вид, когда дело доходит до строки меню. Они также используют общеизвестную терминологию, такую как «Новый…», «Открыть…», «Сохранить как…» и т. Д.
Автор / правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: добросовестное использование
Меню «Файл» в Photoshop отображает множество хорошо знакомых параметров.
5. Предотвращение ошибок
Чтобы пользователи не могли совершать ошибки, Photoshop предоставляет краткое описание или метку инструментов, когда пользователь наводит на них курсор, чтобы убедиться, что пользователи используют соответствующий инструмент для выполнения поставленной задачи.
Автор / правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: добросовестное использование
Пользователь наводит курсор на значок ластика, и Photoshop отображает метку «Инструмент ластика».
6. Распознавание, а не напоминание
Независимо от того, делается ли выбор из меню художественных фильтров или открывается новый файл изображения, Photoshop предоставляет пользователям пример выбора, чтобы сделать правильный выбор. Это позволяет пользователю визуально распознать то, что он ищет, вместо того, чтобы вспоминать имя или вводить его для поиска. Возможно, вы сталкивались с другими программами для редактирования фотографий, которые просят вас вспомнить и ввести имя файла, с которым вы хотите работать.Это действительно может быть действительно трудно вспомнить, поскольку это часто что-то с эффектом: 29412_09342.JPG.
Автор / правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: добросовестное использование
Пользователь может визуально распознать изображение заката по его миниатюре и выбрать его.
7. Гибкость и эффективность использования
Одна из многих причин, по которой частым пользователям нравится Photoshop, — это гибкость и эффективность.Пользователи могут использовать его гибкость, организовывая и добавляя в свое рабочее пространство, а также повышая эффективность, сохраняя его для будущего использования.
Автор / правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: добросовестное использование
Photoshop дает частым пользователям возможность сохранять предпочтительные настройки рабочего пространства.
8. Эстетичный и минималистичный дизайн
Панель инструментов в Photoshop отображает только значки и аккуратно заправлена в сторону, чтобы помочь свести к минимуму беспорядок и сохранить минималистский эстетический вид.
Автор / правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: добросовестное использование
Панель инструментов Photoshop минималистична и позволяет избежать беспорядка, представляя инструменты только значками.
9. Помощь пользователям в распознавании, диагностике и восстановлении после ошибок
При возникновении ошибки Photoshop предоставляет диалоговое окно, в котором пользователь может узнать, что пошло не так и как это исправить.
Автор / правообладатель: Adobe Systems Incorporated.Условия авторского права и лицензия: добросовестное использование
В этом сообщении об ошибке, связанной с неправильным использованием пользователем штампа клона, Photoshop объясняет, что пошло не так, причину и почему пользователю следует поступить оттуда.
10. Справка и документация
Справка и документация могут быть легко доступны через строку главного меню. Оттуда вы можете найти множество справочных тем и учебных пособий о том, как в полной мере использовать программу.
Автор / правообладатель: Adobe Systems Incorporated.Условия авторского права и лицензия: добросовестное использование
В окне отображается информация о том, как создавать ролловеры в контексте веб-графики. Пользователь также может видеть список тем в боковом меню.
10 шагов для улучшения юзабилити, полезности и желательности путем реализации Руководства по проектированию пользовательского интерфейса Nielsen и Molich
Как дизайнер, вы должны иметь возможность критиковать свои собственные проекты, а также работу других с хорошо поддерживаемыми рассуждениями ,Применение 10 эмпирических правил Nielsen и Molich при оценке дизайна интерфейса поможет вам распознать любые потенциальные проблемы, а также поможет вам и вашей команде создать лучший опыт для ваших пользователей. Вот рабочая таблица, с которой вы можете попрактиковаться, изучая навыки распознавания того, были ли эти правила применены и когда эти правила были нарушены. Наконец, пришло время улучшить веб-сайт или приложение путем дальнейшей реализации 10 рекомендаций.
Скачать PDF здесь .
Take Away
Если вы будете следовать 10 рекомендациям по пользовательскому интерфейсу Nielsen и Molich, вы будете проектировать с учетом удобства использования, полезности и желательности. Так же как дизайнеры успешных компаний, таких как Apple, Google и Adobe, вы сможете поддерживать свои дизайнерские решения с помощью тщательно проработанной эвристики и быть уверенными в создании дизайнов, которые могут быть полезными и красивыми. Чтобы попрактиковаться в распознавании этих 10 практических правил, продолжайте и выполните упражнение, описанное в прикрепленном файле из приведенного выше раздела.
Где узнать больше
Чтобы найти больше информации о «Расширении объяснительной силы эвристики юзабилити» Якоба Нильсена, посетите:
https://static.aminer.org/pdf/PDF/000/089/679/enha .. ,
Ссылки и где узнать больше
Изображение героя: Автор / Владелец авторских прав: Barry Schwartz. Flickr. Условия авторского права и лицензия: CC BY-NC 2.0
Курс: Шаблоны проектирования пользовательского интерфейса для успешного программного обеспечения:
https: // www.взаимодействия-design.org/courses/ui-design-patterns-for-successful-software
Научитесь проектировать с учетом потребностей и ожиданий вашего пользователя, применяя Десять руководящих принципов по пользовательскому интерфейсу Якоба Нильсена и Рольфа Молича. Эти эвристики нашли отражение во многих продуктах, разработанных некоторыми из самых успешных компаний в мире, таких как Apple, Google и Adobe. Дальнейшее свидетельство того, как их проектные группы включают эти правила в процесс проектирования, отражено в руководствах по пользовательскому интерфейсу, опубликованных и распространенных этими компаниями.Эта статья научит вас, как следовать десяти основным правилам в вашей работе над дизайном, чтобы вы могли еще больше повысить удобство использования, полезность и желательность ваших проектов.
Nielsen и 10 руководств по проектированию пользовательского интерфейса Molich
Якоб Нильсен, известный консультант по веб-юзабилити и партнер в группе Nielsen Norman, и Рольф Молич, еще один выдающийся эксперт по юзабилити, в 1990-х годах составили список из десяти руководств по разработке пользовательского интерфейса. Заметьте, что существует значительное совпадение между эвристикой Нильсена и Молича и «восемью золотыми правилами» Бена Шнейдермана.Эти 10 практических правил еще раз повторяют восемь золотых правил Шнейдермана через 4 года после первоначальной публикации Шнейдермана.
Видимость состояния системы . Пользователи всегда должны быть проинформированы о работе системы с понятным и хорошо видимым статусом, отображаемым на экране в течение разумного периода времени.
Матч между системой и реальным миром . Дизайнеры должны стремиться отразить язык и концепции, которые пользователи найдут в реальном мире, исходя из того, кем являются их целевые пользователи.Представление информации в логическом порядке и совмещение ожиданий пользователей, основанных на их реальном опыте, уменьшит когнитивное напряжение и облегчит использование систем.
Пользовательский контроль и свобода . Предложите пользователям цифровое пространство, в котором возможны шаги назад, включая отмену и повтор предыдущих действий.
Соответствие и стандарты . Разработчики интерфейса должны убедиться, что графические элементы и терминология поддерживаются на одинаковых платформах.Например, значок, представляющий одну категорию или концепцию, не должен представлять другую концепцию при использовании на другом экране.
Предотвращение ошибок . По возможности проектируйте системы так, чтобы потенциальные ошибки были сведены к минимуму. Пользователям не нравится, когда их заставляют обнаруживать и устранять проблемы, которые могут иногда выходить за рамки их уровня знаний. Исключение или пометка действий, которые могут привести к ошибкам, являются двумя возможными способами предотвращения ошибок.
Признание, а не отзыв. Минимизируйте когнитивную нагрузку, сохраняя релевантную информацию на дисплее, пока пользователи изучают интерфейс. Человеческое внимание ограничено, и мы способны хранить только около пяти элементов в нашей краткосрочной памяти за один раз. Из-за ограничений кратковременной памяти разработчики должны обеспечить, чтобы пользователи могли просто использовать распознавание, а не вызывать информацию из разных частей диалога. Распознать что-либо всегда легче, чем вспомнить, потому что распознавание включает в себя восприятие сигналов, которые помогают нам проникнуть в нашу обширную память и позволяют всплыть соответствующей информации.Например, мы часто находим формат вопросов с несколькими вариантами ответов проще, чем вопросы с короткими ответами на тесте, потому что он требует от нас только распознать ответ, а не вспомнить его из нашей памяти.
Гибкость и эффективность использования . С увеличением использования появляется потребность в меньшем количестве взаимодействий, которые обеспечивают более быструю навигацию. Это может быть достигнуто с помощью сокращений, функциональных клавиш, скрытых команд и макросов. Пользователи должны иметь возможность настраивать или адаптировать интерфейс в соответствии со своими потребностями, чтобы частые действия можно было выполнить с помощью более удобных средств.
Эстетичный и минималистский дизайн . Держите беспорядок к минимуму. Вся ненужная информация конкурирует за ограниченные ресурсы внимания пользователя, которые могут препятствовать извлечению в памяти пользователем соответствующей информации. Поэтому отображение должно быть сведено только к необходимым компонентам для текущих задач, в то же время предоставляя четко видимые и однозначные средства навигации по другому контенту.
Помогите пользователям распознавать, диагностировать и устранять ошибки .Разработчики должны исходить из того, что пользователи не могут понять техническую терминологию, поэтому сообщения об ошибках почти всегда должны быть изложены простым языком, чтобы при переводе ничего не терялось.
Справка и документация . В идеале мы хотим, чтобы пользователи перемещались по системе, не прибегая к документации. Однако, в зависимости от типа решения, может потребоваться документация. Когда пользователям требуется помощь, убедитесь, что она легко определена для конкретной задачи и сформулирована таким образом, чтобы помочь им выполнить необходимые шаги для решения стоящей перед ними проблемы.
Google Inc., многомиллиардная технологическая компания, безусловно, производит проекты, отражающие вышеуказанную эвристику. Джон Уайли, главный дизайнер Google Search в 2012 году, однажды сказал:
«Когда я думаю о дизайне и создании отличного пользовательского опыта, я обычно думаю о нем с точки зрения трех вещей: удобство использования, полезность и желательность».
Nielsen и Molich 10 руководств по пользовательскому интерфейсу довольно хорошо охватывают эти три ключевых компонента взаимодействия с пользователем, что означает, что вы, вероятно, сможете улучшить пользовательский опыт ваших проектов, следуя этим рекомендациям!
Узнайте, как Adobe интегрирует десять руководств по проектированию пользовательских интерфейсов Nielsen и Molich
Adobe Systems Incorporated, крупная североамериканская компания по разработке компьютерного программного обеспечения, является отличным примером того, как проекты, отражающие десять руководств по пользовательскому интерфейсу Nielsen и Molich, могут привести к успеху для компании ,Один из их самых популярных продуктов, Adobe Photoshop, который является редактором растровой графики, обладает характеристиками хорошо разработанного пользовательского интерфейса, отражающего эти рекомендации.
Мы более подробно рассмотрим, как Adobe Photoshop отражает каждое из этих руководящих принципов, чтобы вдохновить вас на повышение удобства использования, полезности и желательности ваших собственных дизайнов, включив 10 правил практического применения в вашу собственную работу.
1. Видимость состояния системы
Photoshop отлично информирует пользователя о том, что происходит с программой, визуально показывая, к чему привели его действия, когда это возможно.Например, когда пользователи перемещают слои в палитре слоев, они могут визуально видеть представленный слой как физически перетаскиваемый в пространстве.
Автор / правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: добросовестное использование
Графический курсор переходит от представления открытой руки к сжатой руке, когда пользователь перетаскивает слой в палитре слоев. Это облегчает мгновенное понимание состояния системы.Кроме того, выбор Adobe «руки» является отличным примером второй рекомендации, когда система соответствует реальному миру.
2. Соответствие системы реальному миру
Пример Photoshop, имитирующий реальный мир в терминах и представлениях, которые будут понятны их целевым пользователям, — это то, где они разрабатывают информационную структуру и терминологию для отражения той же формулировки, которую мы использовали бы в мир фотографии или печатных СМИ. Для представления цвета используются знакомые понятия и термины, такие как RGB, Hue / Saturation / Brightness и CMYK, а различные инструменты, такие как инструмент Dodge и Burn, имитируют традиционную технику темной комнаты для фотографий.
Автор / правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: добросовестное использование
Photoshop Dodge Tool и Burn Tool имитируют традиционную технику фотолаборатории для фотографий
Автор / правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: добросовестное использование
В Photoshop используется термин «Экспозиция», который широко используется в мире фотографии.
3. Пользовательский контроль и свобода
Photoshop очень хорош в предоставлении пользователям контроля на каждом этапе пути. Когда пользователь вносит изменения в изображение или добавляет различные художественные эффекты, он может быстро и легко сделать шаг назад, если он допустит ошибку, например.
Автор / правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: добросовестное использование
Пользователи находятся под контролем, так как они могут сделать шаг назад или шаг вперед в меню «Правка», или в качестве альтернативы они могут использовать сочетания клавиш Photoshop, например, такие как Alt + Ctrl + Z.
4. Согласованность и стандарты
Photoshop поддерживает стандартную компоновку и внешний вид, когда дело доходит до строки меню. Они также используют общеизвестную терминологию, такую как «Новый…», «Открыть…», «Сохранить как…» и т. Д.
Автор / правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: добросовестное использование
Меню «Файл» в Photoshop отображает множество хорошо знакомых параметров.
5. Предотвращение ошибок
Чтобы пользователи не могли совершать ошибки, Photoshop предоставляет краткое описание или метку инструментов, когда пользователь наводит на них курсор, чтобы убедиться, что пользователи используют соответствующий инструмент для выполнения поставленной задачи.
Автор / правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: добросовестное использование
Пользователь наводит курсор на значок ластика, и Photoshop отображает метку «Инструмент ластика».
6. Распознавание, а не напоминание
Независимо от того, делается ли выбор из меню художественных фильтров или открывается новый файл изображения, Photoshop предоставляет пользователям пример выбора, чтобы сделать правильный выбор. Это позволяет пользователю визуально распознать то, что он ищет, вместо того, чтобы вспоминать имя или вводить его для поиска. Возможно, вы сталкивались с другими программами для редактирования фотографий, которые просят вас вспомнить и ввести имя файла, с которым вы хотите работать.Это действительно может быть действительно трудно вспомнить, поскольку это часто что-то с эффектом: 29412_09342.JPG.
Автор / правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: добросовестное использование
Пользователь может визуально распознать изображение заката по его миниатюре и выбрать его.
7. Гибкость и эффективность использования
Одна из многих причин, по которой частым пользователям нравится Photoshop, — это гибкость и эффективность.Пользователи могут использовать его гибкость, организовывая и добавляя в свое рабочее пространство, а также повышая эффективность, сохраняя его для будущего использования.
Автор / правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: добросовестное использование
Photoshop дает частым пользователям возможность сохранять предпочтительные настройки рабочего пространства.
8. Эстетичный и минималистичный дизайн
Панель инструментов в Photoshop отображает только значки и аккуратно заправлена в сторону, чтобы помочь свести к минимуму беспорядок и сохранить минималистский эстетический вид.
Автор / правообладатель: Adobe Systems Incorporated. Условия авторского права и лицензия: добросовестное использование
Панель инструментов Photoshop минималистична и позволяет избежать беспорядка, представляя инструменты только значками.
9. Помощь пользователям в распознавании, диагностике и восстановлении после ошибок
При возникновении ошибки Photoshop предоставляет диалоговое окно, в котором пользователь может узнать, что пошло не так и как это исправить.
Автор / правообладатель: Adobe Systems Incorporated.Условия авторского права и лицензия: добросовестное использование
В этом сообщении об ошибке, связанной с неправильным использованием пользователем штампа клона, Photoshop объясняет, что пошло не так, причину и почему пользователю следует поступить оттуда.
10. Справка и документация
Справка и документация могут быть легко доступны через строку главного меню. Оттуда вы можете найти множество справочных тем и учебных пособий о том, как в полной мере использовать программу.
Автор / правообладатель: Adobe Systems Incorporated.Условия авторского права и лицензия: добросовестное использование
В окне отображается информация о том, как создавать ролловеры в контексте веб-графики. Пользователь также может видеть список тем в боковом меню.
10 шагов для улучшения юзабилити, полезности и желательности путем реализации Руководства по проектированию пользовательского интерфейса Nielsen и Molich
Как дизайнер, вы должны иметь возможность критиковать свои собственные проекты, а также работу других с хорошо поддерживаемыми рассуждениями ,Применение 10 эмпирических правил Nielsen и Molich при оценке дизайна интерфейса поможет вам распознать любые потенциальные проблемы, а также поможет вам и вашей команде создать лучший опыт для ваших пользователей. Вот рабочая таблица, с которой вы можете попрактиковаться, изучая навыки распознавания того, были ли эти правила применены и когда эти правила были нарушены. Наконец, пришло время улучшить веб-сайт или приложение путем дальнейшей реализации 10 рекомендаций.
Скачать PDF здесь .
Take Away
Если вы будете следовать 10 рекомендациям по пользовательскому интерфейсу Nielsen и Molich, вы будете проектировать с учетом удобства использования, полезности и желательности. Так же как дизайнеры успешных компаний, таких как Apple, Google и Adobe, вы сможете поддерживать свои дизайнерские решения с помощью тщательно проработанной эвристики и быть уверенными в создании дизайнов, которые могут быть полезными и красивыми. Чтобы попрактиковаться в распознавании этих 10 практических правил, продолжайте и выполните упражнение, описанное в прикрепленном файле из приведенного выше раздела.
Где узнать больше
Чтобы найти больше информации о «Расширении объяснительной силы эвристики юзабилити» Якоба Нильсена, посетите:
https://static.aminer.org/pdf/PDF/000/089/679/enha .. ,
Ссылки и где узнать больше
Изображение героя: Автор / Владелец авторских прав: Barry Schwartz. Flickr. Условия авторского права и лицензия: CC BY-NC 2.0
Курс: Шаблоны проектирования пользовательского интерфейса для успешного программного обеспечения:
https: // www.взаимодействия-design.org/courses/ui-design-patterns-for-successful-software
,

Дизайнер интерфейсов обучение: Как стать дизайнером интерфейсов в 2020 (UPD 12/01/20) | by Inessa Shillo

Базовые навыки:

Какие задачи решает дизайнер интерфейсов

Этапы работы и инструменты

Что нужно знать и уметь на старте

Фундамент дизайнера

Фокус, цели и задачи

Как бы это работало, если бы это было просто?

Эстетика интерфейса

Что ему нужно?

Системность в дизайне

Даже хорошую идею легко убить

Книги для дизайнеров

Куда устроиться

Генерация удачи

Как зарекомендовать себя на новом месте

Неизбежный исход

Ключ ко всему

где учиться, зарплата, плюсы и минусы

Краткое описание

Особенности профессии

1. Поймите направления в дизайне

2. Изучите инструменты для работы

3. Начинайте обращать внимание на дизайн

4. Окружите себя дизайном

5. Смотрите и повторяйте за другими

6. Найдите менторов и станьте менторами

7. Пройдите курсы

8. Читайте

Кто такой UX-аналитик

Профессия Data-маркетолог: чем занимается специалист по дата-маркетингу, сколько…

Кто такой HR-аналитик

Профессия «архитектурный визуализатор»: подробное описание и обзор

Профессия «Дизайнер текстильного интерьера»: подробное описание и обзор

Профессия «флорист»: подробное описание и обзор

Профессия «фотограф»: подробное описание и обзор

Head of SMM: кто это и чем занимается,…

Профессия блогер: как использовать силу соцсетей для обогащения?

Кто такой директор по маркетингу

Профессия «контент-мейкер в спорте»: подробное описание и обзор

Мастер презентации и публичных выступлений: подробное описание и…

Профессия «руководитель отдела продаж»: подробное описание и обзор

Профессия «онлайн-преподаватель»: подробное описание и обзор

Специалист по управлению персоналом: какие функции выполняет, каким…

Кто такой BI-архитектор/BI-разработчик

Профессия «Go-разработчик»: подробное описание и обзор

Специалист по GIT: зачем нужна система управления версиями

Профессия VoIP-инженер: специалист по настройке IP-телефонии

Профессия «архитектурный визуализатор»: подробное описание и обзор

Кто такой BI-архитектор/BI-разработчик

Профессия «Дизайнер текстильного интерьера»: подробное описание и обзор

Мастер презентации и публичных выступлений: подробное описание и…

Топ-10 курсов по управлению командами

Топ-12 курсы по управлению на Agile: Scrum, Kanban,…

Топ-10 курсов для финансистов

Топ-3 курса по работе с персоналом в спортивной…

ТОП-8 курсов Tilda: создание сайтов с нуля

Топ-11 курсов для 3D-дизайнеров

Топ-10 курсов по ландшафтному дизайну

Топ-6 курсов по сервисному дизайну

Топ-11 курсов по сквозной аналитике

Топ-9 курсов по контент-менеджменту

Топ-6 курсов для директоров по маркетингу

Топ-7 курсов по созданию спортивного контента

Топ-6 курсов для VR & AR-разработчиков

Топ-3 курса по компьютерному зрению (Computer Vision)

Топ-5 курсов по Power BI

Топ-10 курсов по тестированию мобильных приложений

Летние скидки в Skillbox

Топ-11 курсов по сквозной аналитике

Топ-10 курсов по управлению командами

Топ-12 курсы по управлению на Agile: Scrum, Kanban,…

«Google Таблицы»: гайд для простых людей

Гайд по сервису Яндекс.Метрика: как настроить и не…

Профессия аналитик: обязанности, зарплата, где учиться и как…

Профессия Web-аналитик: кто такой и чем занимается, зарплата…

Гайд по сервису Яндекс.Метрика: как настроить и не…

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

Стоимость привлечения клиента (CAC): расчет и формулы

Как рассчитать LTV: формула и пример расчёта жизненной…