Модульная система — система вёрстки, при которой основой композиции полос и разворотов становится модульная сетка с определенным шагом (модулем), одинаковым или разным по горизонтали и вертикали.
Задачи сетки:
Ускорение работы
Мы не тратим лишнего времени на поиск геометрического места элемента в макете. К тому же имеем обоснования в размещении элементов.
Сбалансированность и пропорциональность
Элементы в макете соизмеримы и пропорциональны между собой. Мы можем обосновать размеры блоков, кегль и проч.
Ускорение и шаблонирование, единообразность элементов
Разработав сетку, мы делаем основу для решений на будущее. Грамотные гайды содержат детальное описание модульных сеток. Касательно веб-дизайна, мы можем с легкостью предусмотреть тривиальные макеты для всего сайта и сделать заготовку для единичных случаев.
Основываясь на собственном дизайнерском опыте, наш соотечественник, Алексей Черенкевич опубликовал в ЖЖ цикл статей о назначении и принципах построения модульных сеток.
Когда перед вами не стоит задача создать интерактивный прототип, то вы можете открыть Photoshop, которому на днях исполнилось 20 лет и нарисовать wireframe там. Именно для этого создан UI Design Wireframe Kit, все объекты которого полностью масштабируемые, а некоторые выполнены как SmartObjects.
В прошлом, 2009-м году вышла 2-я версия программы «ЭКСПЕРТ», которую хорошо знают бухгалтеры, юристы, кадровики и все те, кто много времени проводит в работе с нормативными законодательными документами РБ.
В статье на сайте dev.by рассказывается, как в Студии Дмитрия Борового разрабатывали новый интерфейс этой системы.
Авторы - специалисты по проектированию пользовательских интерфейсов - предлагают более 75 шаблонов проектирования взаимодействия для создания собственных удобных и привлекательных веб приложений. Приводимые шаблоны иллюстрируют шесть ключевых принципов проектирования, позволяющих в полной мере использовать возможности современных веб технологий и обеспечить эффективность процесса взаимодействия с пользователем. Обсуждается и ряд антишаблонов, которых следует избегать при проектировании интерфейсов.
Для наглядности изложения каждый шаблон сопровождается конкретным примером действующего сайта. Большим подспорьем при чтении книги послужат цветные версии иллюстраций, которые можно скачать с сайта издательства либо воспользоваться галереей иллюстраций оригинального издания по адресу http://www.flickr.com/photos/designingwebinterfaces/.
Издание содержит всю необходимую дизайнеру и разработчику информацию для принятия правильных решений по созданию или обновлению интерактивного сайта или насыщенного веб приложения. Представленные в книге шаблоны послужат прекрасным дополнением к инструментарию и полезным справочным материалом как новичку, так и опытному специалисту.
Посмотреть содержание, несколько страниц из книги и сделать предзаказ вы сможете на странице книги на OZ.by
В будущем не стоит ждать прорыва в пользовательских интерфейсах, размышляет Скотт Беркун в свое статье “The future of UI will be boring“. С мнением Скотта не согласна Кэмерон Чапман, автор статьи “The Future of User Interfaces“. В этой статье она описывает как уже ставшие реальностью технологии, гаджеты и интерфейсы, например: Nintendo Wii, сканеры отпечатков пальцев, Google Voice Search, так и готовящиеся к выходу Xbox Project Natal, гибкие OLED дисплеи, iPad и другие.
История визуального дизайна пользовательских интерфейсов может быть охарактеризована как постепенный переход к более реалистичному отображению информации. Компьютеры стали быстрее, дизайнеры научились искусству отображения более реалистичных деталей, таких как цвет, 3D-эффекты, тени, прозрачность и даже простой физике. Некоторые из этих новшеств помогли юзабилити. К примеру, тени позади окна помогают нам увидеть какое окно является активным. Материальность пользовательского интерфейса iPhone делает использование устройства более естественным для человека.
В других областях, улучшения в лучшем случае сомнительны. Графический интерфейс пользователя, как правило, полон символов и знаков. Большинство графических элементов, которые вы видите на экране призваны передавать суть идеи или концепции. Домик на вашем рабочем столе не является маленьким реалистичным домиком, это всего лишь концепция «домой». Глаз не является фактическим глазом, он означает «отобразить выбранный элемент». Треугольник не треугольник, он означает «кликните сюда, чтобы увидеть доступные команды».
Мы уже писали об интерфейсах для голливудских фильмов и сегодня хотел бы представить работы Марка Колерана, дизайнера фантастических интерфейсов для фильмов: Мистер и миссис Смит, Идентификация Борна, Миссия невыполнима 3 и других.
“Большинство программистов любят программировать. Они готовы учиться новым особенностям языков программирования, пробуют новые компоненты и библиотеки, улучшают свои алгоритмы и архитектуру кода или скажем оптимизируют структуру используемых данных. Это кажется очень важным, потому что, программа хороша настолько, насколько хороши её коды и алгоритмы и насколько все это оптимизировано. И это так. Но только если программы пишутся для программистов.
Как вы наверное догадываетесь, большинство программ разработаны для пользователей, которые ничего не знают о программировании, компьютерах или других технических вещах. Нравится вам это или нет, но вы бы хотели, чтобы они пользовались вашим продуктом.
И так мы вплотную подошли к откровению. Держитесь, сейчас я вам его раскрою. Пользователи видят только интерфейс программы, и ничего за его пределами. Для пользователя нет ничего в программе, за исключением её интерфейса с кнопками, текстами и других декоративными элементами.”
Количество веб-приложениях и веб-сайтов, использующих Ajax постоянно растёт. Отработка скриптов ajax происходит без перезагрузки страницы и поэтому пользователь может не заметить, что что-то происходит. Вот почему важно показать, что в системе происходят изменения и не позволить пользователям допускать какие-то ошибки во время работы ajax.
Компания «CustIS» провела внутренний семинар по проектированию пользовательских интерфейсов и юзабилити:
“Сейчас модно говорить о юзабилити (usability) и UX (User eXperience), цитировать Алена Купера (Alan Cooper) и спрашивать: «А вы читали очередную книгу Влада Головача?». Только при всём этом, остается непонятным почему некоторые совершенно простенькие на вид интерфейсы оказываются очень удобными и эффективными в работе, а другие, навороченные и красивые, — наоборот, ужасно раздражающими.”
Мы уже много раз писали о различных инструментах проектирования и о проектировании для iPhone. По случаю проведения в Минске открытой конференции WUD (Всемирного дня юзабилити) участники сообщества Usability.by собрали для вас в одном наборе стенсилы для проектирования интерфейсов под iPhone для Axure RP, Fireworks, Illustrator, OmniGraffle, Powerpoint, Keynote, шаблоны для бумажного прототипирования и html/css+jquery для динамических прототипов. Скачать стенсилы можно на сайте конференции
Концепт мультитач-интерфейса с десятипальцевым методом управления. Главная цель — длительное использование без усталости. Концепт включает в себя гладкую панель, похожую на графический планшет, и софт «Con10uum», изменяющий интерфейс ОС, подстраивая его под данный метод.
Наш мозг достаточно эффективный инструмент для решения задач. Возникает только одна проблема - это обмен и обсуждение идей. Идеи заперты в нашей голове и доступны только их автору. Рисование высвобождает идеи и позволяют другим увидеть и понять их. Визуальное представление позволяет совместно работать над обсуждением и улучшением ваших идей. Что бы я не пытался отобразить, иерархию в информационной архитектуре или документ с особенностями взаимодействия с веб-сайтом, рисование набросков зарекомендовало себя как наиболее подходящий и ценный инструмент для выражения моих идей.
В статье “Tools for Sketching User Experiences” Джейсон Робб делится своим богатым опытом работы с бумагой и маркерами, которые он использует каждый день при разработке интерфейсов. Кстати автором упомянутой в статье книги является Билл Бакстон, о котором мы уже писали сегодня и который выступит с докладом на конференции User Experience 2009 в Москве.
Вы добавили товар в корзину, но решили продолжить работу с интернет-магазином. Вы посмотрите на ссылку “Продолжить покупки” и размышляете куда она ведёт? На страницу продукта? На страницу категории? А может быть на главную страницу магазина? В статье “Continue Shopping Means What?” приводятся примеры интерфейсных решений для того, чтобы дать пользователю возможность продолжить покупки.
Ищите идеи для своего магазина? Закажите юзабилити анализ интернет-магазина у группы экспертов 1point. Используя собственный опыт по повышению пользовательских качеств российских интернет-магазинов и методики западных коллег, мы проводим юзабилити-аудит и даём рекомендации, которые сделают Ваш интернет-магазин полезным, удобным и провоцирующим пользователей к покупке.
Способы организовать юзабилити-деятельность по дешёвке интересует не только отечественных специалистов. “Мы не будем проводить юзабилити-тестирование для этого проекта. У нас просто нет на это бюджета и времени”. Часто приходиться слышать такое? Нам особенно, ведь мы работаем в Ирландии - небольшой стране с такими же небольшими компаниями и бюджетами. Однако мы считаем анализ и исследования слишком важными, чтобы быстро сдаться. Часто мы вынуждены проводить тесты для наших клиентов быстро и недорого. Чтобы заинтересовать клиента нам необходимо четко показать, как тестирование помогает повысить прибыльность его бизнеса. Вот почему мы разработали методику и подобрали набор инструментов для быстрого и дешевого исследования UX.
В статье “Low-budget Prototyping Techniques” рассказывается о технологии, известной как быстрое прототипирование, и каким образом авторы смогли эффективно использовать его в проекте Vodafone Ireland.
Раен Сингер, сотрудник компании 37 signals, выступил на конференции WindyCityRails в Чикаго с докладом, в котором он разъясняет ключевые концепции по созданию пользовательских интерфейсов.
Хочешь стать частью сообщества Usability.by? Для развития проекта нужны авторы, переводчики и инициативные люди. Если хочешь присоединиться к сообществу, напиши email о себе в свободной форме.
