После прочтения Google's AngularJS Guidelines у меня создалось впечатление о его незавершённости, а ещё в нём часто намекали на профит от использования библиотеки Closure. Ещё они заявили, «Мы не думаем, что эти рекомендации одинаково хорошо применимы для всех проектов, использующих AngularJS. Мы будем рады видеть инициативу от сообщества за более общий стайлгайд, применимый как для небольших так и крупных проектов».

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

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

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

Мы продолжаем писать про проектирование сайтов и разработку интерфейсов. На этот раз выделили сразу 19 принципов построения интерфейсов. Эти принципы мы по крупицам собирали на протяжении последних 3х лет работы из разных книг, статей, исследований и, конечно, собственного опыта разработки интерфейсов.

Создание интерфейсов в проектировании больших сайтов – это самый объемный и один из самых важных этапов. Поэтому я отдельно решил выделить принципы и законы проектирования интерфейсов.

• Принцип KISS. От англ. «keep it short and simple». Интерфейс должен быть простой и понятный, задачи должны решаться минимальным числом действий, все должно быть понятно и очевидно.
• Не заставляйте думать. Нужно избегать сложных действий, которые заставляют пользователей думать.
• Убираем очевидное. Не стоит показывать очевидные элементы интерфейса, нужно сосредоточиться только на действительно необходимых вещах.
• Соотношение сигнал / шум. В каждом интерфейсе есть важные элементы (сигналы) и маловажные или даже бессмысленные для определенной части системы (шум), естественно, нужно концентрироваться на сигналах и избегать шума.
• Проверенное лучше модного. Не стоит цепляться за моду и делать что-то только потому, что так делают другие, лучше отдать предпочтение проверенным элементам интерфейса.

Вольный перевод статьи Якуба Линовски — «A Good User Interface».

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

Это третья часть переведённых заметок «Good User Interface». Первые 16 частей уже ранее перевели наши коллеги из ADV на Хабре, а вторые 11 перевели мы.

Идея 28


Используйте варианты по-умолчанию, не заставляя людей выбирать

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

Не так давно стал посматривать в сторону Selenium WebDriver, который в связке с PageObject становится прекрасным инструментом для автоматизированного тестирования. Те, кто не знаком с Selenuim, могут ознакомиться в этой статье, а здесь можно прочесть конкретно про Selenium WebDriver.

При написании этой статьи были использованы:

1. Maven
2. TestNG
3. Selenium WebDriver
4. PageObject
5. Подопытный кролик: pechkin-mail.ru

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

Best of Awesomeness & Usefulness for Web Developers

Две недели назад я опубликовал «Лучшие интересности и полезности за год». Моим дайджестам тогда исполнился ровно один год и я хотел разместить пост точно в срок. Но не правильно рассчитал время и не упомянул много всего, что должно было быть в той подборке. И даже в опросах забыл указать в редакторах Vim, во фреймворках ExtJS и тд. За что мне очень стыдно. В целом подборка выросла как минимум в два раза и я создал репозиторий на GitHub. Моей целью не было сделать очередной awesome-* список, в которые попадает практически все подряд — лучшие и ненужные альтернативы. Я попытался выделить все самое лучшее.

DUO

Авторы проекта называют его сборщиком нового поколения для фронтенд разработчиков. DUO собрал в себе все самое лучшее от Component, Browserify и Go.

После довольно удачного старта на рынке мини-компьютеров китайская компания Tronsmart осваивает новый вид медиаплееров, которые предназначены для трансляции изображения с экрана смартфона/планшета/компьютера на экран телевизора. Данные устройства отличаются простотой использования и весьма демократичной ценой. В сегодняшнем обзоре мы познакомимся с моделью под названием Tronsmart T1000.

Аннотация

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

Почему популярность минимализма постоянно растет?

Популярность минимализма неуклонно растет в последние годы. Задолго до появления флэт дизайна (плоского дизайна, flat design), минимализм оказывал большое влияние на художников, скульпторов, режиссеров, дизайнеров интерьера, дизайнеров и, конечно, веб-дизайнеров.

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

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

Вот где пригодятся методы юзабилити.

Прогнозная аналитика — это технология, которая опирается на Big Data, данные о поведении людей, чтобы предсказывать, как они будут вести себя в будущем, и оптимизировать бизнес-процессы с помощью этих знаний. Вам когда-нибудь хотелось заранее знать о том, какие продукты ваши клиенты будут покупать с наибольшей вероятностью? Как было бы здорово, если бы вы могли предугадать максимальную цену, которую клиент готов заплатить за продукт. А что если бы вы могли оптимизировать клиентский сервис и решить все проблемы еще до того, как они возникли бы у пользователя? Скорее всего, эти знания помогли бы вам увеличить свою прибыль в сфере e-Commerce и повысить конверсию.

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

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

Поэтому нам приходится непрерывно обновлять интерфейс МоегоСклада. Хотим рассказать вам про общие принципы переработки UI — зачем, когда и как это делать.

Зачем улучшать UI?

Переработка UI — дорогостоящий процесс. За последнее время наши разработчики потратили на нее не меньше 30% времени, а могли бы вместо этого добавлять новые возможности. Значит, надо четко понимать, для чего мы меняем UI и какие выгоды это даст.

Для себя мы определили задачи, которые должен решать идеальный интерфейс:

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

Теперь о конкретных действиях.

Лендинг — двигатель продаж? Далеко не всегда это так, бывает, что продукт настолько тяжело понять, исходя из информации на landing page, что продажи падают: посадочная страница отталкивает потенциальных клиентов. Мы продолжаем публиковать материалы, которые могут быть полезны молодому бизнесу для повышения конверсии. Из данной статьи Peep Laja, дополненной примерами, можно узнать, как добавить дополнительную информацию «не для всех» на продающую страницу не создавая помех массовому посетителю, и правда ли уродливые лендинги продают лучше, чем страницы с хорошим дизайном. Статья написана от первого лица.

Дизайн интернет-магазинов – задача априори более комплексная в сравнении с обычными сайтами. E-commerce-сайты, как правило, заточены на оптимизацию процесса покупки и, как результат, повышение конверсии. Поэтому в e-commerce дизайне есть два типа трендов — практические, продиктованные юзабилити, и декоративные, пришедшие из веб-дизайна как такового. Что сегодня актуально в e-commerce дизайне, какие идеи воплощаются «для красоты», а какие реально помогают продавать лучше и больше?

Доброго времени суток, уважаемые хабравчане. Сегодня я хочу поделиться с вами одним небольшим событием — ровно год назад, 15 августа 2013 года я опубликовал свой первый дайджест для веб-разработчиков. С тех пор было опубликовано 25 выпусков и мои подборки обрели некоторую «популярность», а мне приятно ощущать себя «полезным» для хабраобщества.

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

Чем крупнее и сложнее становится сервис, тем больше времени приходится уделять тестированию. Поэтому желание автоматизировать и формализовать этот процесс вполне законно.

Чаще всего для автоматизации тестирования веб-сервисов применяется Selenium WebDriver. Как правило, с его помощью пишут функциональные тесты. Но, как всем хорошо известно, функциональные тесты не могут решить задачу тестирования верстки сервиса, что требует проведения дополнительных ручных, зачастую кроссбраузерных, проверок. Как тест может оценить корректность верстки? Чтобы обнаружить регрессионные ошибки верстки, тесту потребуется некоторый эталон, в качестве которого может выступать изображение корректной верстки, взятой, например, с продакшен-версии сервиса. Этот подход носит название screenshot-based testing. Подход этот применяется достаточно редко, и чаще всего верстку все же тестируют вручную. Причина этому – ряд достаточно строгих требований к сервису, к среде выполнения тестов и к самим тестам.

Расширенные ответы сервисов Яндекса в результатах поиска — мы у себя внутри по старой традиции называем их «колдунщиками» — дополнительное звено, в котором что-то может сломаться.

На примере тестирования колдунщиков в поиске мы расскажем, какими особенностями должен обладать тестируемый сервис, какие проблемы возникают у нас при использовании screenshot-based testing, и как мы их решаем.

Landing page важны потому, что именно при взгляде на них потенциальный клиент за секунды решает, хочет ли он купить ваш продукт. А значит, лендинги — ключевой элемент маркетинговой стратегии, который нужно улучшать для повышения конверсии. Продолжаем делиться советами по созданию лендингов, на этот раз — вторая часть статьи Peep Laja, написанной от первого лица. Из нее можно узнать, как выбрать копирайтера для лендинга, и почему стоит избегать использования шаблонов при написании текста и при выборе его дизайна.

Текст на продающей странице – это самое главное

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

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

Жили-были в двух соседних деревушках Вилларибо и Виллабаджо две команды разработчиков. И те и другие делали ревью кода, писали тесты, приводили рефакторинг, но через год разработки в Вилларибо уже выпустили релиз и вышли в продакшн, а в Виллабаджо все еще проводят рефакторинг и чинят баги. В чем же дело?

Разработка ПО – область, подверженная рискам. В нашей сфере при наступлении одного или нескольких рисков, срок поставки рабочей версии может сдвинуться не на привычные и комфортные 10-20%, а на все 150-300%. И надо признаться, что это далеко не предел.

Мы можем либо скрестить пальцы и надеяться, что удача будет сопутствовать проекту во всем, либо признать, что по статистике большая часть проектов по разработке ПО «проваливается» и предпринять дополнительные усилия по ослаблению возможных рисков.
Моя практика показывает, что клиенты крайне неохотно работают по схеме T&M и чаще предпочитают Fixed Price. В условиях зафиксированной стоимости наступление рискового случая означает автоматическое снижение рентабельности проекта: сотрудники получают зарплату ежемесячно, а не за сданные проекты.

До Agile и XP вся ответственность за работу с рисками ложилась на менеджеров. В гибких методологиях разработчики гораздо больше вовлечены в процесс и делят ответственность с менеджерами. Однако, принципы XP и Agile – больше методологические, чем технологические. Я думаю, что с рисками эффективнее работать комплексно на всех уровнях, в том числе на самом низком уровне, т.е. во время проектирования и написания кода.

Почему об этом следует думать разработчику, если есть менеджер?

1. Не секрет, что если факап случится, менеджмент примет единственное «супер-умное» решение: «давайте поработаем сверхурочно и в выходные»
2. Премии сотрудники получают тоже обычно за в срок сданные, а не за проваленные проекты
3. Чувство сделанного дела, в конце концов. Гораздо приятнее сдать проект во время и видеть улыбку клиента, чем с опозданием в полгода отвязаться от «трудного ребенка»

С моей точки зрения спокойная рабочая обстановка вместо авралов и бонусы – неплохая мотивация, чтобы начать заботиться об этом.

В последний год мы написали много статей по UX / UI проектированию eCommerce проектов и не только. Концепция проекта и интерфейсы – это, безусловно, очень важно, однако есть еще несколько крайне важных вещей, которые нужно учесть. Не важно, кто их будет учитывать: UX / UI Designer, SEO Specialist, Web Developer, Project Manager или кто-то еще, важно на каком этапе жизни проекта. А сделать это нужно задолго до запуска проекта, на этапе разработки.

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

1. Robots.txt. Файл для правил индексации поисковыми системами. Создать и положить в корень сайта. В идеале индексация должна быть открыта всем поисковым системам и всему сайту (за исключением закрытых разделов, таких, как личный кабинет).
2. Файл Sitemap.xml. Карта сайта для поисковых систем. Создать и положить в корень сайта. Сделать автогенерацию с заранее заданным весом страниц разбитым по типам информации (например, страница товара 8, страница категории 9, страница статьи 7 и т.д.). Загрузить файл в поисковые системы.
3. Карта сайта. Кроме Sitemap.xml еще желательно сделать отдельную страницу на сайте, дать ссылку на неё в нижней части сайта и также поместить ссылки на основные страницы. На одной странице не должно быть больше 300 ссылок. Если на сайте больше страниц, то проблему можно решить через пагинацию внизу страницы «Карта сайта».