Tag Archives: tools

Обзор свежих материалов, август 2010

13 Сен

Этот материал продолжает серию ежемесячных обзоров свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрельмай-июньиюль.

Методы и практики

In Defense of A/B Testing
Paras Chopra написал отличную статью в защиту метода A/B-тестирования, в последнее время подвергшегося критике со стороны проектировщиков и дизайнеров. Он опровергает три основных претензии, которые касаются в первую очередь зацикливания на не самых эффективных изменениях.

Guidelines for Designing Data Tables
Connie Malamed, автор книги “Visual Language for Designers”, дает серию советов по оформлению таблиц. Она описывает ментальный процесс работы с таблицей и рассказывает о том, как упростить пользователю прохождение по нему.

Making User Interface Elements Difficult to Use By Intent
Статья Jacob Gube, в которой он рассказывает о намеренном усложнении интерфейса в тех случаях, где возможна потеря данных и другие неприятные последствия.

Making the Deal — Supporting Product Demos with User Assistance
Mike Hughes из IBM описывает процесс оптимизации интерфейса демо-версий продукта. Он описывает 4 характеристики, в которых демонстрация должна быть особенно хороша — ценность продукта и ее наглядный показ, внимание к существующим проблемам пользователя, конкурентные преимущества.

User Interface Stack Exchange
Новый сервис вопросов и ответов, посвященный практическим вопросам проектирования интерфейсов. Здесь собраны популярные вопросы и ответы практикующих специалистов на них.

Good Help is Hard to Find
Статья Lyle Mullican описывает несколько способов представления справочной информации в веб-сервисах. Он разделяет помощь на два типа — интегрированную в общий процесс и показываемую отдельно.

Guidelines for user friendly URI Design
Неплохая памятка о создании понятных и читабельных URL от Jacob Gillespie. Статья рассказывает об общих принципах и дает серию полезных советов.

Инструменты

Free Wireframing Kits, UI Design Kits, PDFs and Resources
Одна из наиболее масштабных подборок шаблонов и стенсилов для проектирования и дизайна веб-сервисов и мобильных приложений. Хотя таких коллекций в последнее время появляется все больше, эта статья от Smashing Magazine — одна из наиболее подробных и проработанных.

20 Free Web UI Element Kits and Stencils
Еще одна коллекция шаблонов и стенсилов для проектирования и дизайна. Не так много нового, но может быть полезна.

Паттерны

Liquid Information Navigation – A New Paradigm?
James Kalbach из LexisNexis описывает постепенно развивающийся тренд в веб-интерфейсах — аналог контекстного меню десктопных приложений. Хотя такие меню периодически встречаются вот уже несколько лет, в статье собрана вместе подборка таких примеров.

Dark Patterns — Black Hat, Anti-Usability Design Patterns
Коллекция анти-паттернов проектирования, в которой собраны примеры того как делать не нужно. Примеров пока не так много, но автор сайта Harry Brignull активно публикуется в профессиональном сообществе и вряд ли забросит интересное начинание.

Процесс

All Look Same? A Comparison of Experience Design and Service Design
Jodi Forlizzi сравнивает user experience design и service design с тем чтобы понять, насколько близки эти дисциплины. В статье делаются отсылки к их истории и общему процессу.

Learning from Our Challenge Piles
Отличнейшая статья Michelle Gilmore, в которой она делится своим опытом решения проблем, возникающих при работе с заказчиком работ по проектированию и дизайну. Она описывает 4 типовые ситуации из своей практики и рассказывает о том, как было найдено решение.

Кейсы

Case study — How we made an extra £14 million a year for a travel company
История о том, как был переделан сайт турагентства Sunshine Travel и как это помогло значительно повысить конверсию. Статья описывает основные изменения и процесс работы над проектом.

Designing a Persuasive Video Game
Здорово описанный кейс, рассказывающий о процессе создания обучающей игры. John Ferrara пишет об использовавшихся принципах игровой механики и том, чего они хотели достичь их использованием.

Migrating a Corporate Intranet to SharePoint — A Case Study
Jen Hocko описывает процесс переноса корпоративного интранет-сайта на платформу SharePoint и то, какие задачи решал проектировщик в этом процессе.

Теория

Emotional Design with A.C.T.
Интереснейшая серия публикаций Trevor van Gorp, в которой он описывает психологические основы вовлекающих интерфейсов. Он исследует вызывающий эмоции дизайн и то, как можно создавать его.

Updating Our Understanding of Perception and Cognition
Выдержка из книги Jeff Johnson “Designing with the Mind in Mind”, в которой он описывает процессы восприятия и познания. Крайне полезное чтение, которое позволяет понять как работает и что видит глаз, как происходит процесс чтения и распознавания объектов. Вторая часть статьи —www.uxmatters.com/mt/archives/2010/08/updating-our-understanding-of-perception-and-cognition-part-ii.php.

История

What is a Device?
Выдержка из будущей книги Dan Saffer “Designing Devices”, в которой он описывает краткую историю устройств. А это очень полезно для понимания того, как развивались интерфейсы.

Тренды

5 Creepy Ways Video Games Are Trying to Get You Addicted
Подробное описание 5 распространенных принципов игровой механики от David Wong, которые используются во многих хитовых играх. Статья особенно хороша тем, что в ней приводится масса примеров и отсылок к исследованиям.

Свежие ссылки можно также отслеживать во Friendfeed-ленте User Experience.

Omnigraffle Sitemap Generator

20 Авг

Omnigraffle Sitemap Generator — это скрипт для генерации карты сайта в XML файл на основе структуры проекта в Omnigraffle.

Скачать Sitemap Generator

Обзор свежих материалов, май-июнь 2010

23 Июл

Юрий Ветров, пользователь сайта Хабрахабра, опять подал нам новую порцию обзоров на новые инструменты, материалы и практики по юзабилити. Спасибо ему огромное!

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

Методы и практики

Wireframe Showcase
Коллекция примеров wireframes. Хотя по масштабности ей далеко до коллекции №1, в ней каждая схема страницы совмещена с итоговым дизайном — это помогает лучше понять особенности процесса проектирования.

Sketches and Wireframes and Prototypes! Oh My! Creating Your Own Magical Wizard Experience
Traci Lepore подробно описывает возможные уровни проработки интерфейса от скетчей и wireframes до интерактивных прототипов и дизайна. Статья хорошо показывает, как вместе с затрачиваемым на продумывание интерфейса временем растут его продуманность и уменьшаются «белые пятна». На эту же тему недавно написал Tyler Tate, включив в статью небольшой полезный кейс из практики с примерами готовых документов и графиком их создания.

Designing for Delight (презентация Giles Colborne)
Giles Colborne из компании CXPartners описывает процесс создания дизайна, который вызывает у пользователя ощущение восторга. Причем речь идет не о модных визуальных решениях — для этого важнее предвосхитить ожидания или помочь в проблемной ситуации.

How to Engage Customers in Your E-Commerce Website
В своей статье для Smashing Magazine Rung Andras рассказывает о пользовательских рейтингах в интернет-магазинах — как лучше собирать их, отображать на страницах сайта и учитывать в специальных предложениях.

The Question Protocol — How to Make Sure Every Form Field Is Necessary
Caroline Jarrett, автор книги «Forms that Work: Designing Web Forms for Usability» описывает хороший способ сокращения полей форм. Речь идет об опроснике для заинтересованных лиц компании-владельца сайта, который позволяет определить, кому именно нужны предоставляемые пользователем данные и можно ли отказаться от их части.

The Small Print — Writing UI Instructions
Connie Malamed дает несколько советов о том, как стоит писать краткие поясняющие тексты в интерфейсах. В первую очередь это касается форм и системных сообщений.

Not to Prime, is a Crime!
Jodie Moule из компании Symplicit рассказывает о методе исследования пользователей «priming». В ходе него участвующие в исследовании создают коллажи, описывающие их повседневные дела, что помогает лучше понять контекст и особенности их жизни и работы.

Читать далее

Программа для проектирования сайтов и интерфейсов на Айпаде

7 Июн

Пользователь nikolaz создал программу, которая позволяет создавать прототипы прямо со своего iPad. Что представляет из себя программа, и какие «плюшки» в ней есть лучше прочитать со слов автора.

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

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

Из других «вкусностей»:
— выравнивае по гайдлайнам
— управление цветами обводки/заливки/текста
— управление размером шрифта
— экспорт в Фотоальбом, ПНГ и формат Бальзамик Мокапс популярный в кругах разработчиков
— опции заморозки и клонировая шаблона
— возможность создать ссылку из одного документа на другой

После запуска о программе написали отзывы многие зарубежные сайты, что помогло выбиться в Топ 20 раздела «Производительность» американского АппСтора.

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

Желающим написать свой обзор и имеющим американский Айтюнс аккаунт — свяжитесь со мной по адресу app@sketchyapp.com, я вышлю вам промокод.

Надеюсь моя программа поможет вам в вашей работе!

Да, чуть не забыл, в день начала официальных продаж Айпада в России обязательно сделаю распродажу по $0.99. Сейчас она стоит $4.99 — примерно как кружка пива в среднем московском заведении.

Новые шаблоны для форм в Google Docs

24 Май

Google добавил 24 новые темы оформления форм в Google Docs. При создании тем использован Google Font API.

Прототипирование в GoogleDocs

20 Май

Как только в GoogleDocs появилась возможность создавать рисунки, то многие сразу же задумались, как это можно использовать для себя и конечно архитекторы пользовательских интерфейсов тоже заинтересовались этим. Ведь главная плюшка не в том, что можно рисовать в онлайне, а в том, что можно совместно редактировать.
И вот разработчик интерфейсов Morten Just, работающий в Vadafone, создал небольшую подборку скетчей для создания интерфейсов веб-сайтов в GoogleDocs.

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

Вот 5 фактов, почему им стоит пользоваться:

  • Удобно работать в команде над прототипом
  • Все храниться в облаке.
  • нет риска потерять файл или изменить его неправильно — всегда можно откатить.
  • Это бесплатно
  • У многих есть Google аккаунт.

Вот небольшой скриншот и ссылка на сам файл. Удачного дня!

Посмотреть и начать использовать!

P.S. Решил написать что мне не понравилось в GoogleDocs Drawing:

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