Автор оригинальной идеи этой статьи — Джон Иннс, консультант в области гибких методологий IT-разработки. С первоисточником можно познакомиться здесь. Мы его немного доработали, много упростили, но теперь статью, хотя бы, можно читать :)



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

Почему учитывать опыт взаимодействия — важно?

На Хабре в свое время было несколько статей «Очень много полезных штук для AS3». Автор попытался собрать ссылки на самые полезные и интересные библиотеки. И т.к. в последнее время я разрабатываю под iOS, решил последовать его примеру и сделать то же самое, но для своей платформы. Описания почти прикладывать не буду, все есть на страничках проектов.

Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей, либо применения дополнительных библиотек на JavaScript (см. например Columnizer-плагин для jQuery).

Многоколоночная верстка контента (не путать с задачей общей многоколоночной верстки страницы, которая скорее ближе к проблеме расположения блоков по сетке) долго пробивала себе дорогу в мире веб-стандартов и, наконец-то, не просто достигла статуса Candidate Recommendation в виде соответствующего модуля CSS3 Multi-column Layout, но и получила достаточно широкую поддержку в браузерах: где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версиях (IE10+), причем сразу без префиксов.

Приглашаю уважаемых хабровчан на учебный курс по проектированию айфоновских интерфейсов: brainwashing.pro/interfaces-for-iphone



За четыре дня (включая один день самостоятельной работы) участники проработают по одному приложению от идеи до детального дизайна. Можно улучшить существующее приложение, разобрав и собрав его «по косточкам», или создать новое, которое давно крутится в голове, но до сих пор в статусе идеи из-за нехватки знаний или времени. С утра до позднего вечера мы будем обсуждать айфоновскую логику и оформление, полученные знания можно тут же применить на практике и обсудить промежуточные результаты с лекторами и коллегами. Последний день посвящён разбору и коллективному обсуждению готовых интерфейсов.

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

Немного об истории решения этого вопроса.

Самой первой популярной техникой была так называемая FIR (она же — Fahrner Image Replacement), которая появилась в 2003-м году. Она проста как пень, и многие начинающие верстальщики ее до сих пор используют:

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

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

И, как обычно, прощу прощения за объем статьи. Но, надеюсь, вам будет интересно дочитать до конца.

Здравствуйте!

Это вторая из трех статей о техниках анализа проблем и принятия решений (первая здесь).

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

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

Примеров в этой статье не будет по двум причинам.
1. Пример в первой статье оказался крайне неудачным
2. Текст получился бы слишком громоздким, если бы я использовал хотя бы один пример (сейчас поймете почему)

Всех заинтересовавшихся прошу под кат.

Расскажу о личном опыте выпуска iPhone-приложения Pocket Lists, продажи которого за первые два с половиной месяца составили $12500 долларов США. Категория приложения: Productivity.



Приложение разработано командой из двух человек. Надеюсь, мой опыт поможет сориентироваться инди-разработчикам, которые планируют выпустить собственное приложение и не имеют больших финансовых ресурсов на проталкивание приложения в топы Аппстора.

Первый месяц после выпуска

Приветствую вас, читатели Хабра!

На прошлой неделе мы выпустили приложение AppleInsider.ru, которое в первый же день попало в топ-50 русского сегмента App Store, и в данной статье я бы хотел рассказать немного о его создании, используемом инструментарии, а так же поделиться статистикой в первые дни его запуска.
Надеюсь, что мой рассказ не покажется вам занудным, и вы сможете почерпнуть что-то полезное из описанного.

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

Эти 70 шаблонов проиллюстрированы сотнями примеров приложений для операционных систем Apple, BlackBerry, Android, Symbian, Windows и WebOS будут изданы O’Reilly Media как «Mobile Design Pattern Gallery». Ниже приведена одна из моих любимых глав — Приглашение.

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

Notification Center — удобная и простая в использовании функция в iOS, но она ограничена лишь стандартными виджетами. Не секрет, что любители jailbreak уже давно пользуются сторонними твиками, но вот информации о их разработке практически нет. В этой статье я постараюсь это исправить и описать процесс создания на примере виджета для проверки баланса моего интернет-провайдера.

Привожу перевод статьи Ника Карсона. В статье собраны вместе, как мне кажется, основные правила построения интерфейса для iOS приложений.

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

2. Ориентируйтесь на устройство при создании приложений: учтите не только размер экрана, но и где и когда устройство используется. Больше всего iPad используется для развлечений между 8-11 часами вечера, перед сном, тогда как iPhone — в очереди на автобус или в кофейне. Учтите различные сценарии использования при разработке приложений – включая и то, как далеко устройство расположено от лица пользователя.

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

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

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

За остальными 45-ю — добро пожаловать подкат.

Достался мне проект по адаптации флеш-курса электронного обучения под iPad.
Хотел поделиться некоторыми моментами.

Медиа
Проект должен был позволять играть видео/аудио файлы, причем без лишний движений со стороны пользователя.
Видео на iPad можно проиграть только путем нажатия пользователем на что-нибудь, т.е. автоматически проиграть медиа файл, например, при загрузке страницы не получится, или получится, но далеко не во всех версиях iOS.
Так что первый раз проиграть видео/аудио приходится по клику пользователя. Дальше, если тому же тегу менять атрибут src, отлавливая событие onended, проигрывание можно делать автоматически.

Стивен Виттенс переработал свой сайт Acko.net. Виттенс применил 3D функции CSS 3 и небольшую часть JavaScript для создания ошеломляющего 3D заголовка страницы.

Чтобы увидеть 3D в действии вам надо использовать браузер WebKit (Safari или Chrome) т.к. пока только они поддерживают CSS 3D эффекты. В других браузерах, которые еще не поддерживают 3D эффекты сайт все равно нормально просматривается. Чтобы увидеть полный 3D эффект обязательно прокрутите страницу.

Виттенс в своем блоге подробно написал как он создал 3D эффекты и даже сделал 3D редактор, с которым вы можете поиграть.

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

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

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

Карта

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

Представляю вашему вниманию перевод статьи под названием "User Experience and the design of news at BBC World Service" от Tammy Gur. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением компании BBC и издания Johny Holland Magazine.

Проектирование окружающей среды для стремительного потока информации, проходящего через новостной веб-сайт в режиме нон-стоп — это вызов, не похожий ни на что другое. Команда дизайнеров и специалистов в области UX в BBC World Service создает новостные сайты для десктопных и мобильных браузеров на 27 языках, удовлетворяя различные аудитории по всему миру. В этой статье мы поделимся этим опытом с вами.

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

Проблема довольно острая, потому что быстродействие является критически важной характеристикой UI. Например, по оценке Amazon, задержка загрузки страницы всего лишь в 0,1 секунды приводит к снижению оборота магазина на 1%. По оценке Google, задержка в 0,5 секунды уменьшает количество поисковых запросов на 20%.

Ruby/JavaScript-разработчик Алекс Маккоу (Alex MacCaw) из компании Twitter предлагает логичное решение проблемы: распространить принципы Ajax не только на фронтэнд, но и на пользовательский интерфейс. Он разработал соответствующий фремйворк для того, что называется AUI (асинхронный интерфейс пользователя).

Навеяно долгими поисками различных систем прототипирования и желанием поделиться этим опытом. В данном посте отсутсвуют сложные системы типа iRise или IBM Rational Rose, ввиду того что они являются не столько и далеко не только системами простого прототипирования, да и стоимость этих решений подходит предприятиям немалого маштаба. Этот пост о чем-то более земном.

Прототипы, как инструменты дизайна, находятся на подъёме, и вот почему. Я твёрдо верю, что прототипирование помогает нам в процессе создания качественных пользовательских интерфейсов. Мы работаем в мире богатых, обладающих динамикой интерфейсов пользователя как в сети, так и на наших устройствах. Интерфейсы, которые мы создаём, интерактивны, откликаются на воздействие пользователя и обладают эмоциями. Прототипы позволяют сформулировать чувства и функции дизайна так, как этого не могут сделать простые экранные формы. Но как выбрать лучший инструмент прототипирования для работы?

При использовании свойств box-shadow или border-radius непосредственно на изображении, браузеры могут некорректно отображать заданные нами CSS стили, из-за чего внешний вид блока будет существенно отличаться от задуманного. Однако если использовать изображение в качестве фона, то этой проблемы можно запросто избежать. Из статьи вы узнаете, как с помощью jQuery сделать идеально закругленные углы у изображений, а так же какие еще способы оформления возможны с помощью таких свойств как box-shadow, border-radius и transition.