На прошлой неделе мы представили
10 Полезные интерфейса веб-приложений Techniques, в первой части нашего обзора полезных тенденций дизайна в современных веб-приложениях.Среди прочего, мы выделили встроенное видео блоки, специализированные управления и контекстно-зависимая навигации.Мы также призвали дизайнеры, чтобы отключить нажатием кнопки, используйте тени вокруг модальных окон и ссылка на страницу регистрации от входа в page.
Это сообщение представляет второй части нашего обзора: 12 полезных методов для хорошего дизайна пользовательского интерфейса в веб-apps.Мы также обсудим, как реализовать эти методы так, чтобы они правильно используются.Пожалуйста, не стесняйтесь предлагать новые идеи, подходы и кодирования решений в комментариях below.
Вы также можете взглянуть на следующие статьи:
- Веб-дизайн Тенденции 2009
- 5 Полезные кодирования решений для дизайнеров и Developers
- 10 полезных методов для улучшения пользовательского интерфейса Designs
- 10 принципов эффективного Design
- Еще пять принцип эффективного Design
1.Выделите важные changes
Одним из наиболее важных элементов хорошего пользовательского интерфейса видимости system’ S status.Пользователи должны заметить сразу what’ творится за кулисами, и являются ли их действия фактически привели к ожидаемым результатам.Для достижения более сложном уровне системы видимости, веб-приложений в эти дни использовать AJAX (конечно), что позволяет пользователям обновлять части веб-страницы в любое время без обновления всей страницы.AJAX приносит уровня оперативности и интерактивности веб-приложения намного ближе к настольной класса applications.
Yammer применяется не один, а три воздействие на все новые сообщения в канал: исчезать в сдвиньте вниз и highlight.
Однако это динамичный характер означает, что когда вы нажимаете на кнопку, страница не обновляется, но что-то does случиться.Большинство веб-сайтов до сих пор не используют AJAX широко, поэтому некоторые пользователи могут не бытьуверен, что ничего не произошло вообще, или кнопка была нажата правильно.Чтобы это исправить, необходимо предоставить некоторые визуальные feedback для каждого из interactions.
Backpack обводка эффект для всех новых элементов в список задач, который длится секунды до замирания out.
Один отличный способ сделать это с анимацией.Человеческий глаз может уведомление movement достаточно хорошо, особенно если остальная часть страницы является статическим.Игра выделить анимации при добавлении элементов в их тележки, например, будет привлечь их eyes этих пунктов.Они увидят, что их действия не работало.Анимации могут быть реализованы с помощью JavaScript и являются хорошим способом обеспечить визуальную обратную связь.Только убедитесь, что не переусердствуйте, добавив слишком много анимации может привести к интерфейсу трения, потому что скорость, с которой пользователь выполняет каждое действие будет замедляться по продолжительности animation.
2.Включите быстрые клавиши в веб-application
Как расширенные возможности современных веб-приложений (таких, как перетаскивание, модальные окна и т.д.) постоянно получают на тех, настольных приложений, разработчики этих приложений пытаются предложить пользователям более гибкой и интерактивные пользовательские интерфейсы.Один из методов, используемых для достижения этой цели является Интеграция клавиш или navigation.Так же, как с классическими приложениями, эта маленькая особенность может значительно улучшить рабочий процесс пользователей и сделать его проще для них, чтобы получить свои задачи done.
В самом деле, различных веб-приложений уже используют ярлыки (например, Google Spreadsheets MobileMe и т.д.), и даже обычные веб-сайты, такие как Ffffound или Boston.com, позволяющиепосетителям использовать их для основной навигации.Ffffound позволяет пользователям использовать сочетания клавиш для переключения из эскизов к списку зрения, и наоборот (с помощью “ v”), вернитесь к началу (“ h”) и перейдите к предыдущему (“ k”), а затем(“ j”) изображения.Boston.com также использует “ k” и “ j” за тот же functions.
It’ S стоит отметить, что ярлыки должны быть интуитивно понятны и очевидны.Например, wouldn’ T имеет смысл сделать контекстноебуквы “ Previous” и “ Next” навигации слишком далеко друг от друга на клавиатуре, а, скорее, выбрать те, которые находятся близко друг к другу.Причина в том, если пользователь делает ошибку и переходит на страницу, она doesn’ T хотите посетить, она может сразу же вернуться к своей странице, не глядя на клавиатуру.“ j/k” Конфигурация является одним из вариантов.Было бы на самом деле сделать прекрасный смысл имеют некоторые общие соглашения для сочетания клавиш используются различные веб-сайты, но мы haven’ T смогли обнаружить такие конвенции, таким образом, far.
Как вы реализуете this?По сути, вы просто должны использовать onKeyPress DOM-событий и управлять внешним видом документа с помощью window.scrollTo функции в JavaScript.
Ffffound.com использует onMouseDown эффект в разметке, которая не является хорошим решением, потому что doesn’ T придерживаться Главным ориентиром ненавязчивого JavaScript coding: ты будешь отдельные функции JavaScript из таблицы стилей CSS и (X) HTML markup.
<a id="float-navi-prev" href="javascript:void(0);"
onmousedown="try { move_asset_auto(-1) ;} catch (e) { }"
onclick="return false;">prev(<span class="shortcut">k</span>)
</a>
Вот оно имело бы больше смысла использовать библиотеку JavaScript, а не (как JQuery) и называть элемент по его идентификатору или класса.That’ с (почти), что Boston.com делает.Все изображения в галерее помечены класса bpImage в разметке, с указателями наличие на них добавляются в массив.OnKeyPress событие вызывает прокрутку окна в фоновом режиме, и window’ S браузер манипулировать, используя window.scrollTo() function.
Здесь (X) HTML:
... <img src="[url]" class="bpImage" /> <div class="bpCaption">...</div> <img src="[url]" class="bpImage" /> <div class="bpCaption">...</div> <img src="[url]" class="bpImage" /> <div class="bpCaption">...</div> ...
И JavaScript:
function bpload(){
// put pointers to all images with the class "bpImage" in an array
imgArr = getElementsByClassName(document.body,"bpImage")
isLoaded = 1;
}
document.onkeypress = function(e) {
if (!e) e = window.event;
// Pick up what key was pressed
key = e.keyCode ? e.keyCode : e.which;
// 107 is the ASCII code for 'k'
if(( key == 107 ) && ( isLoaded ) ) {
// if there are images...
if ( currImg > 0 ) {
// decrease the counter for the current image
currImg--;
// offsetTop returns the vertical coordinate of the
// upper-left corner of the image
// (we are not sure why the script adds 174px. Any idea?)
window.scrollTo(0,imgArr[currImg].offsetTop+174)
}
else {
if (currImg==0) {
currImg--;
window.scrollTo(0,325)
}
else
{
if (currImg<0) {
window.scrollTo(0,325)
}
}
}
}
if ( ( key == 106 ) && ( isLoaded )) {
// a similar code snippet for 'j'
...
}
}
}
Но вы должны убедиться, что вы ясно сообщить, что 1) сочетания клавиш доступны, и 2) они могут быть использованы для выполнения определенных задач более эффективно.Если пользователь может легко управлять своими задачами с приложением, он вряд ли переключиться на другое приложение, если набор функций более или менее similar.
3.Обновление варианты со счета page
Если ваше приложение включает в себя несколько баллов, убедитесь, что удалить интерфейс трения для клиентов, решив upgrade.Большинство пользователей хотели бы попробовать основные версии приложения первым, чтобы получить лучшее представление о том, что он предлагает и как она работает.Если они убеждены, что заявка соответствует их ожиданиям, они будут рассматривать переход на более продвинутый план.It’ S designer’ S задача убедиться, что этот переход является простым и интуитивно понятным, как possible.
CrazyEgg интегрирует возможности “ Изменения plan” в основных navigation.
В самом деле, многие веб-приложений положить вариантов модернизации прямо на счет пользователя page, что делает их легко доступными.Этот выбор дизайна имеет простой преимущество предоставляя пользователям обзор доступных опций и поддерживаемых функций правой away.
Bigcartel ‘ планы с обновления доступны в приложении itself.
Заметим, однако, важность не только с изображением имеющихся планов модернизации, но и определение плана, что пользователь currently использования и возможности, которые currently доступными для нее.Очень важно, чтобы предоставить пользователям точную информацию о том, какие преимущества они получают за счет модернизации своей учетной записи.Взгляните на наши статьи Цена таблицы: примеры и лучшие Practices как well.
4.Реклама особенностей application
Даже если вы создали подробную страницу маркетинга, с изложением вашего приложения каждую функцию, и созданный подробную справку на вашем сайте, ваши пользователи вряд ли все это читать.Они, вероятно, не знакомы со всеми особенностями вашего продукта и выиграли бы от маленьких советов внутри приложения itself.
Реклама новые возможности в вашей application. Эти, как правило, идут на боковой панели, из пути из основных функций.Если пользователь приближается к максимальной емкости определенные функции для нее выбрали тарифный план, вы должны указать на это и дать ей возможность быстро upgrade.
Freckle time- отслеживание приложение сообщит вам, когда вы запустите из людей на ваш текущий план.В сообщении также ссылки на действия, которые можно предпринять, если вам нужно upgrade.
Wufoo подчеркивает ее новая функция виде галереи в нижней части страницы Создание формы, убедившись, что клиенты получают максимальную выгоду из app.
5.Используйте цветные lists
Некоторые приложения функции каналов, которые объединяют различные типы контента.Например, у вас может быть приложение по управлению проектами, который показывает вам все последние сообщения, задачи и файлы на главной странице.Если все эти пункты появляются вместе в одном списке, это может быть трудно сказать, что к чему.Многие приложения используют цветовое кодирование, чтобы помочь визуально различать разные типы entries.Самый простой способ сделать это, чтобы разместить текстовую метку внутри цветной коробки.Таким образом, список становитсяЛегко scannable.
It’ Важно не использовать различные цвета для той же задачи или похожие цвета для совершенно разных задач.Цветовая гамма не должна быть случайной, но должны неявно указывают на функции каждого элемента serves.
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров