Site icon AppTractor

«Отрежь это» или несколько советов по проектированию интерфейсов

Ник Паркер, UI/UX дизайнер, в блоге «Дизайн Кабак» на Medium поделился мыслями о том, как правильно отрезать лишнее в дизайне.

Как оно получается

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

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

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

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

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

Встречают по одежке, провожают по уму  —  это работает для UI/UX

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

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

Проектирование MVP

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

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

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

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

Контекст

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

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

У поисковика Google эта информация показана более четко и добавлено еще время, за которое был обработан запрос.

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

Не старайтесь вставить в интерфейс информацию, которая не нужна пользователю или слишком очевидна для него. Например, если он в каком-либо приложении для просмотра онлайн-ТВ нажимает кнопку «Записанные выпуски передач», потом выбирает передачу и затем выбирает выпуск за конкретную дату и время, то во время просмотра нет смысла кричать о том, что он в прошлом. Можно немного и ненавязчиво подсказать, так как он самостоятельно туда пришел.

Ваш пользователь не дурак

Заключение

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

Подписывайтесь на меня на разных площадках — Dribbble, Behance,Facebook и Twitter. И не забудьте ознакомиться с моим последним продуктом — Splash UI Kit for Sketch.

Exit mobile version