Юзабилист » проектирование

Как создавать ссылки в Axure RP

puzik — Thu, 27 Oct 2011 08:33:00 +0000

Axure RP это одна из самых мощных программ для проектирования интерфейсов. С ее помощью кроме статических прототипов можно создавать интерактивные: связывать страницы ссылками, создавать всплывающие окна, эмуляцию Drug and drop и т.д.

Для тех кто делает только первые шаги в Axure RP мы создали короткое видео о том как создавать ссылки.

Было ли вам полезно это видео?Читайте также:

Возможности сенсорных телефонов

puzik — Mon, 24 Jan 2011 08:33:45 +0000

Сенсорные дисплеи дают огромную возможность для полета фантазии проектировщика интерфейсов. Ждем новых интересных идей.

А пока, одна из интересных возможностей использования телефона с сенсорным экраном.

Читайте также:

Простота залог успеха

puzik — Mon, 02 Aug 2010 05:30:19 +0000

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

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

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

Программист добавил полезную функцию

puzik — Tue, 06 Jul 2010 08:00:32 +0000

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

Битва с самым худшим интерфейсом в мире

puzik — Thu, 24 Jun 2010 08:00:09 +0000

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

Комикс о вовлечении пользователей в процесс

puzik — Thu, 17 Jun 2010 06:00:36 +0000

Насколько ваши сайты могут вовлечь пользователя? Хороший интерфей это когда пользователь с удовольствием пользуется вашим ресурсом и не замечает как проходит время.Читайте также:

Баланс — принцип дизайна

puzik — Mon, 12 Apr 2010 11:50:08 +0000

На простых примерах демонстрируется как сделать макет более сбалансированным.

Программа в которой работает дизайнер MS Expression Design 2.Читайте также:

20 рекомендаций для прототипирования в Axure RP Pro

puzik — Tue, 06 Apr 2010 12:22:03 +0000

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

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

Если есть у кого свои рекомендации делитесь в комментариях.

1. Скачать программу Axure RP Pro. На сайте можно скачать 30- дневную триал версию. Программа создана специально для прототипирования, это хороший инструмент для профессионалов.

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

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

4. Скачайте с сайта готовые нужные библиотеки. Эти библиотеки существенно помогут при проектировании.

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

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

7. Называйте все своими именами. Присваивайте страницам реальные названия. Затейливые либо остроумные названия могут быть понятны только вам.

8. Lorem ipsum — sucks. При создании прототипа вставляйте реальный текст и реальные картинки. Это поможет рассчитать пространство, придаст прототипу реальные очертания.

9. Построить сетку будущего сайта. На сайте Axure RP есть готовая библиотека для системы шириной 960 пикселей. Можно создать самому мастер, если у вас ширина страницы не стандартная.

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

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

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

13. Делайте прототип аккуратно, сначала прикиньте структуру на бумаге. Лучший инструмент проектировщика бумага и карандашь с резинкой. В прототипе выравнивайте текст, блоки. Не ленитесь, кроме вас это придется смотреть еще кому-то. Запомните, оценивать вашу работу будут по прототипу.

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

15. Сразу расставляйте ссылки. Потом можно забыть. При многократном копировании элементов со страницы на страницу вы генерируете новую работу. Чем больше элементов- тем больше придется расставлять ссылки. В Axure RP нельзя проставить ссылку на выделенную группу объектов (Можно конечно поставить прозрачный прямоугольник поверх поверх объектов и поставить ссылку на него, но это может больше вас запутать).

16. Группируйте элементы (сгруппировать Ctrl+G, разгруппировать Ctrl+Shift+G ). Группировать удобно логически завершенные блоки. Помогает при простых манипуляциях: перетаскивание , выравнивание.

17. Используйте Preserv corners (правая кнопка на картинке/редактировать картинку). Эта функция полезна когда нужно растянуть не всю картинку, а какую-то ее часть, причем тянется часть между появившихся треугольников.

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

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

И главная рекомендация:

20. Проектируйте с удовольствием, не насилуйте себя. Если уже не лезет в голову ни одна мысль, а все что было перепуталось — отдохните, встаньте с рабочего места, попейте чай/кофе, прогуляйтесь.Читайте также:

Как располагать действия «Назад» и «Вперед» в веб формах?

puzik — Fri, 22 May 2009 15:19:58 +0000

Среди дизайнеров часто обсуждаются вопросы о размещении кнопок (действий) в веб формах. Типичным вопросом из этой дискуссии есть:

Может ли действие которое ведет к предыдущему шагу процесса размещаться справа от действия что ведет вперед ?

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

Так кто же прав?

Обе стороны! Одной из причин по которой возникает так много дискуссий на эту тему заключается в том что слишком часто веб-дизайнеры (разработчики) создают «Мастер» (из Windows) в котором пользователи двигаются через цепочку шагов.

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

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

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

Эти рассуждения помогают выбрать нужный вариант размещения кнопок «Назад» и «Вперед».

Так как следует их размещать?

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

Что делать если подпись полей сверху?

Формы , в которых подпись к полю ввода размещена сверху наиболее подвержены проблеме действий «Назад-Вперед», поскольку у них меньше пространства слева от полей ввода. В таком случае сохранение порядка слева направо (Назад-Вперед) может привести к непреднамеренному нажатию кнопки «Назад» вместо того чтоб закончить заполнение формы. Тогда стоит расположить действия: слева «Вперед», справа «Назад», чтоб не мешать продвижению пользователя по форме .

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

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

Статья "Previous and Next Actions in Web Forms " , автор Люк Врублевски (Luke Wroblewski) опубликована 21.09.2008 в его блоге http://www.lukew.com/

Перевел Олег Карапузов, сайт Usabilist.com.ua

Читайте также:

Проектирование взаимодействия своими руками

puzik — Thu, 19 Mar 2009 14:13:03 +0000

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

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

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

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

Не клонируйте дурные и неудобные вещи выдавая их за преимущества!

Читайте также:

Кому надо юзабилити?

Создание эффективных сайтов

Что лучше экспертная оценка юзабилити или юзабилити-тестирование?

Когнитивное сопротивление

Создание эффективных сайтов

Читайте также: