Рубрика «интерфейсы» - 127

Дорогой дизайнер и недизайнер!

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

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

Читать полностью »

Более пристальный взгляд на пользовательский опыт с мобильными устройствами

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

Чтобы ответить на такого рода вопросы мы должны иметь глубокое понимание того, как пользователи взаимодействуют с мобильными устройствами в реальной жизни.
Читать полностью »

image

Я пишу эту статью на берегу моря, под музыку композитора Брайана Крэйна, вдали от московского офиса, где ведутся работы над новыми проектами. В отпуске у меня появилось немного времени, чтобы поделиться накопленным опытом.

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

Третья часть статьи из цикла «Продающий дизайн интернет-магазина». Для тех, кто пропустил первую и вторую, их можно прочитать тут: «Продающий дизайн интернет-магазина. Часть 1. Аналитика» и «Продающий дизайн интернет-магазина. Часть 2. Элементы интерфейса».

Страница товара

Попав на страницу товара, человек должен получить максимум информации о нем. Здесь не работает правило «краткость – сестра таланта». Так как мы имеем дело с онлайн магазином, то наш покупатель лишён возможности увидеть товар вживую, поэтому мы и должны предоставить ему максимум имеющейся у нас информации: детальное описание, технические характеристики, качественные фотографии, отзывы, видео или 3D-обзор. Отзывы для товаров, кстати, изобрел Амазон, внес социальность на сайт, сильно увеличив тем самым конверсию и продажи.

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

image
Читать полностью »

Время изменилось. Теперь в одиночку можно написать приложение для миллионов человек. Не нужно думать ни о хостинге, ни о дистрибуции, ни о масштабируемости — облака сделают всё за вас.

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

Стоит сейчас какому-нибудь «Энгри бёрдз» написать «2-е птицы», и все молодое поколение будет неправильно наращивать окончания у числительных (на самом деле, наращиваются только порядковые числительные: «2-й дом», «1-му победителю», но «2 птицы»).

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

Поговорим сегодня о внимании к деталям на одном практическом примере (будет много картинок).

Разбираем основные интерфейсные ошибки на примере одного банковского клиента
Читать полностью »

Через неделю на всей территории России вступит в действие национальный стандарт по юзабитили ГОСТ Р ИСО 9241-210-2012 «Эргономика взаимодействия человек-система. Часть 210. Человеко-ориентированное проектирование интерактивных систем».

Эргономика? Фи, это не то! Юзабилити шире эргономики, скажете вы.

Да, понятие «юзабилити» включает в себя эргономику. Но подождите: как они определяют «человеко-ориентированное проектирование», о котором стандарт?

Человеко-ориентированное проектирование (human-centred design) — способ разработки интерактивных систем, направленный на создание пригодных в использовании и полезных систем…

А вот и юзабилити! «Пригодность использования» — не совсем ясная фраза, но именно так они переводят слово «usability». Наверно, когда придёт всеобщий к… минимализм, тогда ГОСТ по юзабилити будет называться «ГОСТ по юзабилити». Но пока так.

Хочу вкратце рассказать, почему этот документ — не пустой звук. Пойдём по порядку.

1. Задачи документа

Кому он нужен?

  • Руководителям — показать место человеческого фактора и эргономики в процессе проектирования.
  • UX-специалистам — рассказать, как происходит проектирование, и каково их участие в этом процессе.

Читать полностью »

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

image

Читать полностью »

Радует, что все больше дизайнеров посматривают в сторону от Адоби в поисках инструментов поудобнее, полегче, попроще и подешевле. И выбирать есть что. Сегодня я расскажу про свой процесс создания дизайна сайта в Sketch.app. Надеюсь, какие-то мысли вы позаимствуете у меня, что-то никогда не станете делать так же, а до чего-то придете своим путем. Оставайтесь с нами.
Читать полностью »

Инженеры из финского центра научно-технических исследований VTT Technical Research разработали необычную замену USB-флэшкам. Они предлагают способ беспроводной передачи данных через электронное устройство, прикреплённое к руке человека. Это может быть кольцо, браслет или даже накладной ноготь, как на фото.

InTouch: перенос файлов между устройствами с помощью прикосновения

Копирование файлов со смартфона на планшет или ноутбук происходит прикосновением к устройству. Нужно указать пальцем на нужный файл — и он сразу как бы копируется «на ноготь».
Читать полностью »

За 6 лет менялась работа, стили управления тоже менялись, пришлось пройти scrum и agile в IT-компаниях, проектную систему в телекоме. В последнее время ко мне стало обращаться все больше менеджеров среднего и высшего звена с просьбой посоветовать «нормальную online-систему с диаграммой Ганта». Кем-то движет мода, чаще — реальная необходимость. Поэтому и пришло решение сделать обзор нескольких привычных online-систем с диаграммами Ганта.

Vox populi

Лучше любых аналитических сайтов и Википедии сущность диаграммы Ганта описана на одном из форумов: «Я встречал использование диаграмм Ганта (MS Project) при планировании производства на небольшом металлообрабатывающем заводе. Выглядело и работало очень красиво, повышало качество труда (хрен знает на сколько процентов), снижало кол-во накладок планирования. <...> Один раз даже видел, как начальник цеха объяснял слесарю, размахивая распечаткой, типа: „Петрович, твою мать! Ты посмотри сюда, линеечка красная, видишь? Это значит если ты эту х*%№# будешь так медленно точить, то Василич из-за тебя меньше получит, видишь — у него тоже линейка красная. Ты как хочешь, но сам ему потом объясняй...“
image
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js