Первые подозрения, что что-то не так, закрались полчаса назад, когда у меня зависли сообщения в браузерной версии ВК. Всё встало на свои места, когда в личку пришло сообщение: «Был бы признателен если бы написали статью «что не так с альфа-версией редизайна вконтакте». Не вру, правда пришло такое сообщение. Первая реация была: да о чём там писать, вроде нормально же всё. Но потом я присмотрелся.


Правда убрали же

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

Рассказ о попытках увидеть окружающий мир в совершенно ином свете и как это в итоге привело к созданию устройства, позволяющего «видеть» WiFi. В процессе будет использован популярный модуль ESP8266. Без Arduino, к сожалению, тоже не обойдется.

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

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

Вчера мне довелось первым из представителей прессы побывать в компании Байкал электроникс, разработавшей и производящей процессор Baikal-T1.

Сегодня Global Accessibility Awareness Day, к которому мы внедрили поддержку accessibility на главной странице Яндекса. Сейчас слепым пользователям доступна работа с Яндекс.Браузером, Почтой и частично со страницей результатов поиска, над которой работа еще продолжается. Хочу поделиться нашим опытом — возможно, он в чём-то поможет и вам или хотя бы вдохновит.

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



Серьёзным толчком стал глобальный редизайн Яндекса. Полная переработка интерфейсов создала предпосылки для деятельности по обеспечению доступности. Не последнюю роль тут сыграл Илья iseg Сегалович, сооснователь компании Яндекс, который был сторонником внедрения accessibility и расстраивался из-за того, что этому направлению не получалось уделять должное внимание. Отдельных членов команды accessibility Яндекса привлёк именно он, причём некоторых — прямо с Хабра. Сейчас Никита Tseikovets, на конструктивную критику которого тогда ответил Илья, один из тех, кто консультирует Яндекс по вопросам accessibility.

GAAD — хороший повод рассказать, какое место в технологических процессах Яндекса занимают вопросы accessibility, как построены процессы управления проектами и разработки, а также поделиться некоторыми техническими подробностями. Мы надеемся, что наш опыт поможет и вам.

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

Поздравляю, вы познакомились с жизненным циклом прототипа обыкновенного.

Привет, друзья! Прототипы — это становой хребет продуктового дизайна. Я расскажу, почему мы в команде используем только hi-fi прототипы и отказались от всех прочих.

Ранее мы уже говорили про структуру приложений и определение принципов навигации. Кул. Но что со всем этим делать дальше? Не вопрос! Конечно, нужно разработать прототип. Прототип нужен для раннего тестирования MVP, для снижения рисков проектирования, для проверки пригодности предлагаемых решений, для показа акционерам, для краудфандинга и для экономии времени при общении с разработчиками. Отовсюду мы слышим стоны. Всем нужен прототип. Мы должны протянуть руку помощи, и мы ее протянем.
И тут у меня для вас 2 новости. Сначала хорошая: плохая новость могла бы быть намного хуже…

Axure — инструмент для создания интерактивных прототипов сайтов и мобильных приложений. Навыков работы с ним часто требуют работодатели, ищущие проектировщика интерфейсов или UX&UI-дизайнера. В России это почти что отраслевой стандарт. Axure 7 — последняя версия программы. Восьмая версия сейчас в бете.

В одной школе интернет-технологий (не упоминаю, чтобы не сочли за рекламу) с мая 2015 года я рассказываю начинающим дизайнерам об Axure 7. В течение 3 часов (минус небольшой перерыв) объясняю, как работают те возможности программы, которые нужны мне для большинства проектов. И закрепляю знания практикой.

Примерная структура занятия:

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

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

Привет, меня зовут Александр Волков, я проектирую интерфейсы в компании Docsvision. Цель этой статьи — помощь разработчикам сложных программных продуктов. Ключевое слово — сложных. Спроектировать сайт-визитку сегодня может даже пятиклассник прямо на своем смартфоне, и при желании можно скачать зип-архив с готовым шаблоном блога или корпоративного сайта. Однако если ваше приложение посложнее обычного интернет-магазина, то, вполне вероятно, строить структуру и определять принципы навигации вам придется самостоятельно, наступая на разбросанные повсюду грабли. Здесь может пригодиться наш опыт. Я опишу один из возможных способов проектирования интерфейсов, который успешно опробован в нашей компании. Это делается легко и просто (практически в полуавтоматическом режиме) при помощи программы FlyingLogic.

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


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

От переводчика

Юзабилити интернет-магазина — это конструктор, состоящий из множества разных деталей. Одна из шестерёнок этого конструктора — это «хлебные крошки». О них и пойдёт речь в статье. Это мой перевод статьи: http://baymard.com/blog/ecommerce-breadcrumbs. Неточности или ошибки перевода (если Вы такие найдёте) прошу отправлять в личные сообщения — я оперативно внесу необходимые правки. Если статья будет интересна — обязательно переведу и другие материалы подобной тематики.

Введение

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

Сопоставляя различные показатели 40 крупнейших сайтов e-commerce, исследователи обнаружили, что 68% интернет-магазинов испытывают трудности с внедрением этого компонента: 45% сайтов располагают лишь одним вариантом «крошек», а у 23% сайтов «хлебные крошки» вообще отсутствуют.

Друзья, хотим с Вами поделиться адаптированным переводом статьи Тима Эша в интернет-журнале Clickz.com про действенные, но мало распространенные способы повышения конверсии, позволяющие использовать особенности человеческого мышления для повышения конверсии. Перевод дополнен примерами и советами от команды Witget.

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

Привет, Хабр!

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

Рад представить дополнение оригинального списка из 300 потрясающих бесплатных сервисов. Автор оригинальной статьи Ali Mese добавил ещё +100 новых сервисов, которые помогут найти все — от источников вдохновения и редакторов фотографий до создания опросов и бесплатных иконок.

И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.

A. Бесплатные веб-сайты

• HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
• Bootswatch: Бесплатные темы для Bootstrap.
• Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
• Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
• Strikingly: Конструктор веб-сайтов.
• Layers: Создание сайтов на WordPress (new).
• Bootstrap Zero: Самая большая коллекция бесплатных шаблонов Bootstrap (new).
• Landing Harbor:  Продвижение мобильного приложения c помощью бесплатного лендинга (new).

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

«Основная проблема интерфейса в том что это интерфейс. Интерфейсы — это препятствия на пути. Я не хочу сосредоточивать свои силы на интерфейсе. Я хочу сосредоточиться на работе… Я не хочу осознавать себя использующим компьютер, я хочу осознавать себя делающим дело».

Дональд Норман

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

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

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

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

Вот типичная форма подключения к вай-фаю. Она вообще-то на огромной странице с кучей иероглифов, но серая подложка помогла мне понять, что это и есть самая важная форма подключения, а остальное — справка и реклама.



Иконки важны. Судя по ним, галочка внизу — это, почти наверняка, «я согласен с условиями». Телефон вверху — наверняка номер. Дальше — замок — это пароль. Оба поля активные, то есть логин и пароль у меня должны быть сразу, так?

Нет, нифига, китайский UX подразумевает, что я сначала введу телефон и нажму оранжевую кнопку (цвета иконки — и да, это кнопка!). Получу пароль и введу его во второе поле, а потом нажму зелёную кнопку. Робот сравнит телефон с паролем и пустит меня дальше. Эту форму, скорее всего, рисовал китаец.


^{А это обычная такая телефонная будка раннего космического века}

Сейчас покажу ещё несколько вещей, рождённых в стране, где квалифицированных инженеров примерно раз в двадцать больше, чем в Америке, а состояние изобретательности «советского инженера» ещё не пройдено. Я, конечно, опять продолжу свою историю и покажу интерфейсы в реальном мире — они не менее интересны с точки зрения юзабилити, нежели HCI, и не менее полезны для понимания, как можно работать с пользователем.

Мы собрали наиболее частые темы, связанные с сеткой в адаптивном дизайне, чтобы «повысить резкость» термина как такового и систематизировать практические знания: как настраивать сетку в дизайн-макете, по каким параметрам делать расчет, какие особенности адаптивной среды учитывать и на какие детали обращать внимание.

Я хочу дать исчерпывающее описание замечательному фреймворку для построения модульных сеток 960gs. Недавно где-то в комментариях сказали, что 960gs сложнее в понимании, чем blueprint, что меня удивило. Я не хочу заниматься сравнением этих фреймворком, хотя бы потому, что они выступают в разных весовых категориях, однако, для построения модульной сетки ничего легче и проще в понимании, чем 960gs я не видела.