Как разрабатывать интерфейс программы

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

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

Расположение управляющих элементов

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

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

База данных: Создание интерфейса

«Позволительность»

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

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

Использование свободного пространства

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

Простота интерфейса

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

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

Краткий обзор. Проектирование пользовательского интерфейса. Как разработать дизайн. TopUser.Pro

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

От автора страницы: видимо, авторы MS Office 2000 так и не послушали своих коллег. Сейчас пошла мода на неудобные интерфейсы. Решать вам.

Источник: www.ishodniki.ru

Проектирование интерфейса: 8 принципов, которые должен знать каждый UX-дизайнер

Самое важное о UX-дизайне от мировых экспертов по юзабилити.

Яна Дворецкая

Пишет про тексты в интерфейсе, проектирование и дизайн. Развивает направление UX-редактуры в Skyeng. Ведет телеграм-канал про редактуру «Письма от Яны Дворецкой»

UX-дизайн — это сложно, если не знаешь, с чего начать. Мы собрали золотые правила зарубежных специалистов Якоба Нильсена, Бена Шнейдермана и Брюса Тогнаццини и наших — Влада Головача и Ильи Бирмана. Они помогут начинающим дизайнерам, проектировщикам, UX-писателям и продакт-менеджерам создавать качественные, понятные и приятные продукты.

Принцип 1

Опирайтесь на нужды реальных пользователей, а не на свои домыслы

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

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

Объясняйте, что происходит

Хорошо, когда пользователи точно знают, к чему привели их действия и чего ожидать. Например, им не приходится буравить экран взглядом в мучительном ожидании: «Ну что там?» Они могут быть уверены, что данные не пропадут. Якоб Нильсен утверждает, что чем более предсказуема работа с сервисом, тем больше доверия к нему и тем приятнее пользовательский опыт.

Илья Бирман в своей книге «Пользовательский интерфейс» приводит пример о важности обратной связи:

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

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

А Брюс Тогнаццини добавляет: «Хорошо, если пользователям не нужно искать или догадываться о состоянии системы. Они должны взглянуть на интерфейс и сразу понять, что там сейчас происходит».

Не забывайте про обратную связь. Это важно.

Делайте интерфейс продукта похожим на аналоги

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

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

А Брюс Тогнаццини добавляет: «Мода [и красота] не должна победить юзабилити».

Предотвращайте ошибки

В книге «Дизайн пользовательского интерфейса» Влад Головач говорит про сообщения об ошибках:

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

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

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

Существует два типа ошибок: промахи и ошибки.

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

Избегайте промахов — задавайте ограничения для действий и корректные значения по умолчанию. А ещё найдите места в интерфейсе, где пользователь по невнимательности может сделать что-то не так. Например, чтобы он попал пальцем на нужную ему кнопку «Сохранить», уберите от неё подальше кнопку «Удалить» или «Выйти без сохранения».

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

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

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

Снижайте информационную нагрузку

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

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

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

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

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

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

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

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

Используйте контрастные цвета для текста в макете. Это помогает слабовидящим пользователям (а также в условиях низкой освещённости) легче читать содержимое на экране. Вот как Slack.

Как узнать, что удобно пользователям? Тестируйте!

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

Не заставляйте запоминать много информации

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

• предлагайте помощь прямо здесь, в контексте, вместо того чтобы тренировать память пользователей;

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

Как удачно обобщил всё это Якоб Нильсен: «Узнавание лучше, чем вспоминание».

Дайте ощущение контроля над ситуацией

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

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

Влад Головач в книге «Дизайн пользовательского интерфейса» пишет:

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

Для этого он рекомендует:

• не делать кнопки, опасные для пользователя, кнопками по умолчанию;
• дать пользователям возможность отменять свои действия.

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

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

• О самых распространенных ошибках в UX
• О том, что делает интерфейс человечным и дружелюбным
• Об UX-писательстве
• О профессии UX-дизайнера и полезных инструментах и ресурсах

Консистентность интерфейса — целостность, последовательность и непротиворечивость элементов в интерфейсе. Один из примеров консистентности интерфейса — кнопки выполнены в одном стиле и стоят в одном и том же месте.

Источник: skillbox.ru

Как разрабатывать интерфейс программы

22.04.2016

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

Что такое информационный интерфейс?

Представьте, что вы за рулем новенького Acura TL. Это ваш первый автомобиль, вам нравится им управлять. На приборной панели появляется значок с ярко-оранжевым восклицательным знаком. Что это значит? Вы паникуете. Машина перегрелась? Двигатель собирается взорваться?

Надо съехать на обочину? Или игнорировать значок и надеяться на лучшее?

А если бы у вас появился вот такой значок? Были бы вы спокойнее? Добавление небольшого текста о том, что автомобиль требует обслуживания после 10000 миль пробега, добавляет ясности и показывает, что сообщение является важным, но не срочным.

А ещё может появиться значок, что машину скоро надо везти на сервис (конечно, если вы знаете английский). Появилась новая проблема – перевод.

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

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

Хороший пользовательский интерфейс означает хорошую пользовательскую поддержку

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

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

Работа с пользовательским интерфейсом

Как разработчик пользовательского интерфейса я тесно сотрудничаю с проектными группами и владельцами продукта на ранних этапах его жизненного цикла. У меня есть новый взгляд на эту работу, я приобрела некоторые новые навыки и получила ценный опыт для упрощения пользовательского интерфейса. Лучшая помощь, какую пользователь может получить – это помощь, о которой он даже не догадывается! И лучший комплимент, какой только может получить продукт, – это то, что он прост в использовании (а не ругательства в сторону программного обеспечения во время его использования!).

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

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

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

Пишем для взаимодействия

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

Советы для создания хорошего пользовательского интерфейса.

Вот несколько рекомендаций для создания приятного пользовательского интерфейса:

Узнаём своих пользователей

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

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

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

TurboTax позволяет обычным пользователям, таким как вы и я, оплачивать налоги. Это страшно? О чём вы думаете, когда начинаете? Что делать, если идёт проверка? Что делать, если я совершу ошибку? TurboTax начинается с сообщения, которое помогает расслабиться.

Ну или что-то вроде того. Даже когда вы делаете ошибку, приложение объяснит, что делать.

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

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

Какие компании, имеющие отличный пользовательский интерфейс, как правило, приходят на ум? Apple, конечно же (по крайней мере, большую часть времени!) Обеспечивая встроенную помощь в приложениях в рамках этой функции, вы можете направлять пользователя к выполнению задачи. Я понятия не имела, что iCloud Photo Sharing делает по сравнению с My Photo Stream, пока не увидела описание.

Или интегрируйте подсказки и всплывающие окна, как в этой игре типа Эрудита.

Создаём руководства

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

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

Подходящий тон и кнопки для особой аудитории. Например, детей?

Это приложение выбирает более дружеский тон для своей аудитории, говоря «Привет» и «Составь Луне компанию и нарисуй её хорошего друга Мо». А насколько более ясным было бы приложение, если бы в интерфейсе были кнопки Экспортировать и Не экспортировать? Мне нравится! Оно идеально подходит своей аудитории.

Создаём контент на основе задач

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

Точно не ЭТОТ сайт. Что делать? С чего начать?

Источник: protext.su