Основной функцией хороший Пользователь interface является предоставление пользователям интуитивно соответствие между user’ намерения и application’ S функции, которые удается обеспечить решение данной задачи.

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

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

Вы можете взглянуть на следующие связанные posts

• 12 полезные приемы хороший пользовательский интерфейс Design
• 10 Другие полезные методы для улучшения пользовательского интерфейса Designs
• 10 Полезные интерфейса веб-приложений Techniques

1.Простой интерфейс Key

Прежде чем попасть в особенности пользовательского интерфейса, it’ Важно отметить тот факт, что simplicity в пользовательском интерфейсе является общей характеристикой социальных медиа и сетей сайтов.Социальные медиа сайты достаточно просты в плане цветовой гаммы и графики.Цветовая схема обычно состоит из нескольких цветов, наряду с небольшими вариациями монохроматическим, фон, как правило, белый, обновления (например, статус обновлено) часто выделены светлым цветом, а также (обычно зеленый или желтый; оповещения, как правило, выделены красным фономцвет)

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

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

Иными словами, так как поток информации достаточно велика для большинства пользователей, это почти естественный сделать интерфейс как можно более простым.Если интерфейс перестарались с графическими элементами, пользователи будут чувствовать себя некомфортно и запутанной, так как это будет трудно сосредоточиться на конкретных задач или областей.Простой интерфейс doesn’ т просто означает простого визуального дизайна, однако.Более того, это означает, что доступные опции интерфейса разработаны, размещенных и представлена ​​в интуитивно way.

Цвета на социальных медиа и социальных сетей всегда спокойный и поддержку, а не ярким и неприятным.Особенности не борются за внимание, многие из них остаются невидимыми большую часть времени.В самом деле, большинство социальных медиа интерфейсов контекстно-sensitive, показывая множество функций, только “ по demand”.С таким большим количеством данных и функций, яркие цвета будут просто мешать и отвлекать user.

2.Известные и функциональной Search

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

Общая черта в социальных приложений является использование живая результатов поиска и filtering.При вводе в поле, результаты фильтруются в раскрывающемся стиле.Фильтрация помогает пользователям быстро найти контент, который они ищут, и избавиться от любого содержания, которое isn’ T отношение к ним.Вы хотите, чтобы опыт, чтобы быть точно настроены для каждого пользователя и фильтрация поисков делает только this.

На странице результатов поиска является еще более важным, чем удобный дизайн окна поиска. Digg недавно обновила свою поисковую систему и теперь пример чрезвычайно функциональный и очень удобной функцией поиска.Вы можете организовать результаты поиска по опции, такие как лучший матч,Наиболее Diggs, и новым.На правой стороне you’ найдете список возрастные диапазоны, Digg диапазонов, популярные темы и топ-категории.Кроме того, вы можете осуществлять поиск по источнику содержания, тоже.На странице результатов поиска также включает в себя большое строку поиска в верхней части, который помогает пользователю уточнить свой запрос, если necessary.

3.Известный Call-To-Action-Buttons

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

Часто сайты социальных сетей есть только несколько призыв к действию кнопками, которые должны мотивировать пользователей на действия (см. также Web Design Trends: призыв к действию Buttons Кнопки Дизайн Showcase и Хорошо вызовов-To-Action Buttons для хороших руководящих принципов для разработки призыв к действию-кнопки).Эти кнопки, как правило, разработаны и размещены видном месте, в то время как другие элементы дизайна остаются очень тонкие и простые (см. скриншот ниже)

В целом, использование реальных метафор в дизайне пользовательского интерфейса настоятельно рекомендуется.Поэтому хорошая идея, чтобы не только сделать кнопку похож на button (например, с помощью раскрывающегося тени), но и убедиться, что :active — и :focus государств предназначены, соответственно, общение, что кнопка была фактически “ pressed”.В этой ситуации лучше добавить тиснение эффект, а не просто изменить цвет кнопки или ее border.

Кнопка должна быть достаточно большой, чтобы быть замеченными и выбраны без труда.Тем не менее, размер isn’ T единственной характеристикой интерактивные кнопки или ссылки.Другим важным фактором является padding.Если у вас есть линия связи плотно упакованы вместе, это будет невозможно нажать на тот, который вы на самом деле хотите, чтобы нажать кнопку.Вы можете рассмотреть возможность предоставления визуальной поддержки для вашей ссылки или buttons.

В случае ссылки, иногда бывает полезно включить значки или небольшие иллюстрации.Однако, это doesn’ т всегда работает, особенно когда связь не то, что важно для большинства пользователей.Если вам нужно обратить внимание на некоторые важные ссылки, вы должны рассмотреть добавление расстояние доссылку, используйте фон, который выделяется, сделать его большим интерактивных блоков или просто заменить его на видное кнопку.Используйте фон, который выделяется, но isn’ T чрезмерно complicated.

Важно также отметить важность наведении effects.Эффект при наведении позволяет пользователю знать, что кнопка на самом деле интерактивными и подтверждает, что user’ с действием понимается system.

4.Calm Разделение Elements

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

Однако, если многие элементы визуально отделена, интерфейс содержит больше куски информации и, следовательно, схема становится более сложным.Поэтому, чтобы убедиться, что макет остается развертываемых, визуальное разделение должно быть subtle.В большинстве случаев горизонтальных и вертикальных линий разработана в нейтральных, спокойных цветов (например, серого) используются.Сильные, яркие цвета – которые часто трудно не заметить – будет отвлекать пользователей, борющихся за ее внимание.Напротив, “ calm” линии легче игнорировать и обеспечивают визуальную support.

Что именно это значит для отдельных элементов в layout? Twitter использует визуальное разделение структурировать макет.Вы видите, что между твит есть линия разделения двух.Без этой разделительной линии, было бы почти невозможно быстро просмотреть десятки строк текста.It’ с мелких деталей, таких как эта, которые помогают значительно улучшить пользовательский интерфейс, что позволяет легко use.

Delicious использует тонкие 1px-серые линии для разделения популярных закладок своей users.

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

Напротив, Reddit doesn’ т использовать разделение между историями, которые делает интерфейс более суматоху, и, следовательно, более трудным для сканирования.Иногда большое количество активных пробел может также помочь отдельных элементов в макете, однако недостатком этого подхода является то, что страница может стать слишком долго, и пользователь будет иметь для прокрутки по вертикали.В Reddit’ случае с scannability повышается за счет ярких ссылки титул.В центре внимания призван быть доведены до полного названия, которые, безусловно, хорошая идея в этом design.

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

StumbleUpon использует жесткую сетку на основе структуры, в которой каждый элемент контента помещается в блок той же высоте и ширине.That’ другая конструкция подход к спокойное разделение контента, который работает как well.

5.Лечить текст Пользователь Interface

В презентации Девять навыки, которые отдельные хорошие и отличные designers Cameron Moll отметил, что хорошие дизайнеры лечения текста как содержания, в то время как великие дизайнеры лечения текст пользовательского интерфейса.В то время как содержание в основном огромный блок текста, пользовательский интерфейс включает в себя тонкие изменения цвета текста, фона, размеры шрифта и ссылка презентацию, чтобы сделать контент более accessible.

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

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров