В компании «СКБ Контур» описали портрет продуктового проектировщика интерфейсов.
— Кто это.
— Идеальный процесс работы над задачей.
— Требования к прототипам и работе с ними.
— Матчасть: какие книги надо прочесть и принципы понять.
— Должен ли прорабатывать интерфейсный текст (спойлер: это его зона ответственности).
— Знания и навыки в дизайне и вёрстке, исследовании пользователей, веб-технологиях и статистике.
— Инструментарий (Sketch или Figma для интерфейсов).
— Требования по самоорганизации, саморазвитию и передаче опыта.
— Взаимодействие в команде.
— Развитие продукта.
— Этика.
Пример нескольких высокоуровневых характеристик проектировщика:
— Проектировщик следит за тем, чтобы задача для него была сформулирована не в виде решения, а в виде проблемы и ожидаемого результата.
— Проектировщик не предлагает решение сразу, а разбирается в вопросе. Возможно, задачу вообще не нужно делать, или для решения этой задачи не нужен интерфейс.
— Прежде чем что-то добавлять в продукт, проектировщик думает, можно ли проверить гипотезу, ничего не разрабатывая.
Интересное из раздела «Этика»:
— Работы, сделанные в Контуре, можно выкладывать в свое личное портфолио. Нужно указать, что именно сделал владелец портфолио в этом дизайне.
— В личное время проектировщик может делать коммерческие неконтуровские задачи. В определенной степени это даже приветствуется, так как способствует развитию.
https://guides.kontur.ru/principles/uidesigner/
— Кто это.
— Идеальный процесс работы над задачей.
— Требования к прототипам и работе с ними.
— Матчасть: какие книги надо прочесть и принципы понять.
— Должен ли прорабатывать интерфейсный текст (спойлер: это его зона ответственности).
— Знания и навыки в дизайне и вёрстке, исследовании пользователей, веб-технологиях и статистике.
— Инструментарий (Sketch или Figma для интерфейсов).
— Требования по самоорганизации, саморазвитию и передаче опыта.
— Взаимодействие в команде.
— Развитие продукта.
— Этика.
Пример нескольких высокоуровневых характеристик проектировщика:
— Проектировщик следит за тем, чтобы задача для него была сформулирована не в виде решения, а в виде проблемы и ожидаемого результата.
— Проектировщик не предлагает решение сразу, а разбирается в вопросе. Возможно, задачу вообще не нужно делать, или для решения этой задачи не нужен интерфейс.
— Прежде чем что-то добавлять в продукт, проектировщик думает, можно ли проверить гипотезу, ничего не разрабатывая.
Интересное из раздела «Этика»:
— Работы, сделанные в Контуре, можно выкладывать в свое личное портфолио. Нужно указать, что именно сделал владелец портфолио в этом дизайне.
— В личное время проектировщик может делать коммерческие неконтуровские задачи. В определенной степени это даже приветствуется, так как способствует развитию.
https://guides.kontur.ru/principles/uidesigner/
Контур.Гайды
Продуктовый дизайнер — Продуктовый дизайнер — Принципы — Контур.Гайды
Контур.Гайды — это требования к дизайну пользовательского интерфейса веб-сервисов Контура. Данный сборник примеров незаменим для самостоятельного обучения веб-дизайну.
Алексей Бородкин рассказал о методике создания текста для цифровых продуктов.
Идеально, когда в начале проекта есть базовый контент, на который можно опереться, чтобы понять логику и структуру материала, но который можно менять в ходе проектирования.
Если на старте ничего нет, готовят контентное задание, включающее ответы на вопросы:
— Что мы хотим сказать пользователю;
— Где и в каком контексте;
— Как мы это рассказываем (логическое ударение, стиль, голос);
— Ценные указания для копирайтера (например, «здесь хорошо бы перечислить 4 преимущества продукта»).
Копирайтер (желательно, штатный) пишет 1-ю версию текста, его подставляют в дизайн, примеряют и дорабатывают параллельно с дизайном.
Когда проект готов, составляют контентный гайд, похожий на контентное задание. Он нужен, чтобы будущие копирайтеры ничего не испортили.
https://medium.com/советы-по-проектированию-интерфейсов/18e27c85e066
Идеально, когда в начале проекта есть базовый контент, на который можно опереться, чтобы понять логику и структуру материала, но который можно менять в ходе проектирования.
Если на старте ничего нет, готовят контентное задание, включающее ответы на вопросы:
— Что мы хотим сказать пользователю;
— Где и в каком контексте;
— Как мы это рассказываем (логическое ударение, стиль, голос);
— Ценные указания для копирайтера (например, «здесь хорошо бы перечислить 4 преимущества продукта»).
Копирайтер (желательно, штатный) пишет 1-ю версию текста, его подставляют в дизайн, примеряют и дорабатывают параллельно с дизайном.
Когда проект готов, составляют контентный гайд, похожий на контентное задание. Он нужен, чтобы будущие копирайтеры ничего не испортили.
https://medium.com/советы-по-проектированию-интерфейсов/18e27c85e066
Medium
«Тексты не до и не после»: алгоритм работы с текстами в заказной разработке
Вы читаете конспект выступления Алексея Бородкина на онлайн-конференции UX Марафон про тексты. Запись Марафона можно приобрести здесь.
Конспект ещё одного доклада с прошедшего UX-марафона — Марина Степанова рассказала, как писать текст для тех, кто не читает.
Пользователь не читает интерфейсный текст, когда:
1. Пользователь — ребёнок.
2. Текст на незнакомом языке.
3. Нет времени что-либо прочитать (за рулём).
Как написать:
1. Убедитесь, что текст помогает достичь цели.
2. Сократите объём (даже если получается слишком сухо).
3. Говорите с пользователем на одном языке (общайтесь с представителями вашей аудитории, тестируйте текст).
4. Не путайте разные символы (ее → её).
Также в конспекте: как оформить, как не убить мотивацию к чтению, как обойтись без текста.
«Текст не должен выглядеть большим. Если нельзя сократить, разделите его на части и подавайте порционно, отдельными экранами.
Когда пользователь получает порцию текста, он ожидает, что быстро всё прочитает и будет свободен. С каждой новой порцией мотивация падает (сколько там ещё?). Сформируйте ожидание — заранее предупредите о будущем количестве порций, например, с помощью прогресс-бара. Неизвестность пугает больше, чем количество».
https://vandergrav.ru/writing-for-users-who-dont-read/
Пользователь не читает интерфейсный текст, когда:
1. Пользователь — ребёнок.
2. Текст на незнакомом языке.
3. Нет времени что-либо прочитать (за рулём).
Как написать:
1. Убедитесь, что текст помогает достичь цели.
2. Сократите объём (даже если получается слишком сухо).
3. Говорите с пользователем на одном языке (общайтесь с представителями вашей аудитории, тестируйте текст).
4. Не путайте разные символы (ее → её).
Также в конспекте: как оформить, как не убить мотивацию к чтению, как обойтись без текста.
«Текст не должен выглядеть большим. Если нельзя сократить, разделите его на части и подавайте порционно, отдельными экранами.
Когда пользователь получает порцию текста, он ожидает, что быстро всё прочитает и будет свободен. С каждой новой порцией мотивация падает (сколько там ещё?). Сформируйте ожидание — заранее предупредите о будущем количестве порций, например, с помощью прогресс-бара. Неизвестность пугает больше, чем количество».
https://vandergrav.ru/writing-for-users-who-dont-read/
Наталья Хродская написала о работе с сетками в вебе.
Преимущества сетки:
— Определяет единый стиль оформления;
— Сокращает время на принятие решений о том, что, где и каким образом будет расположено;
— Снижает вероятность ошибок при переиспользовании компонентов макета;
— Макет выглядит эстетичнее, элементы пропорциональны и структурированы.
Сначала дизайнер определяет структуру макета и уже потом создаёт под неё сетку.
Виды сеток:
1. Блочная или манускриптная — стандартизированный прямоугольник, который содержит контент. Например, страница книги или статья блога;
2. Колоночная — имеет в своей структуре колонки;
3. Модульная — имеет как вертикальное членение, так и горизонтальное. Модуль — блок размером с заданное количество столбцов и строк;
4. Иерархическая — интуитивное размещение блоков с фокусом на пропорциях и визуальном весе элементов.
Также в статье:
— Что такое базовая сетка. Преимущества 8-пиксельной базовой сетки;
— Понятия hard и soft сеток;
— Вертикальный ритм и разделение макета на строки;
— Преимущества 12-колоночной сетки и работа с ней в адаптивном дизайне.
Сетка должна помогать в дизайне. Не надо всё беспрекословно по ней выравнивать. Если какой-то блок никак не помещается в сетку, его можно не подстраивать.
https://medium.com/design-spot/410cfc1df74d
Преимущества сетки:
— Определяет единый стиль оформления;
— Сокращает время на принятие решений о том, что, где и каким образом будет расположено;
— Снижает вероятность ошибок при переиспользовании компонентов макета;
— Макет выглядит эстетичнее, элементы пропорциональны и структурированы.
Сначала дизайнер определяет структуру макета и уже потом создаёт под неё сетку.
Виды сеток:
1. Блочная или манускриптная — стандартизированный прямоугольник, который содержит контент. Например, страница книги или статья блога;
2. Колоночная — имеет в своей структуре колонки;
3. Модульная — имеет как вертикальное членение, так и горизонтальное. Модуль — блок размером с заданное количество столбцов и строк;
4. Иерархическая — интуитивное размещение блоков с фокусом на пропорциях и визуальном весе элементов.
Также в статье:
— Что такое базовая сетка. Преимущества 8-пиксельной базовой сетки;
— Понятия hard и soft сеток;
— Вертикальный ритм и разделение макета на строки;
— Преимущества 12-колоночной сетки и работа с ней в адаптивном дизайне.
Сетка должна помогать в дизайне. Не надо всё беспрекословно по ней выравнивать. Если какой-то блок никак не помещается в сетку, его можно не подстраивать.
https://medium.com/design-spot/410cfc1df74d
Medium
Модульные сетки в работе UX-дизайнера. Инструкция по применению
Практическое пособие для начинающего и продолжающего дизайнера
Инесса Шилло написала о профессиональном выгорании дизайнера.
Лёгкая усталость и опустошённость по будним дням. Проблемы со сном. Сложнее попадать в состояние потока. Неохотнее встречаться с друзьями.
Предпосылки к выгоранию в дизайнерской работе:
1. Работа под NDA.
2. Ощущение, что вы — чьи-то руки. Например, когда артдиректор (или в запущенном случае — клиент) говорит, как делать.
3. Работа над чужими концепциями. Опять же, когда артдиректор задаёт идею, а дизайнер её прорабатывает.
4. Проекты в стол.
5. Переработки.
6. Мысль о несерьёзности работы. Когда студия дизайна кажется менее серьёзным бизнесом, чем завод или заправка.
7. Финансовый потолок. Чтобы каждый год удваивать или утраивать доход, надо становиться управленцем в виде артдиректора или создавать своё агентство.
8. Отчуждённость труда. Ваш дизайн — деталь для машины, которая состоит из кучи других деталей и на которой зарабатывает другой человек (заказчик).
Если перечисленное выше есть в вашей работе, будьте внимательны.
https://designpub.ru/588259b30142
Лёгкая усталость и опустошённость по будним дням. Проблемы со сном. Сложнее попадать в состояние потока. Неохотнее встречаться с друзьями.
Предпосылки к выгоранию в дизайнерской работе:
1. Работа под NDA.
2. Ощущение, что вы — чьи-то руки. Например, когда артдиректор (или в запущенном случае — клиент) говорит, как делать.
3. Работа над чужими концепциями. Опять же, когда артдиректор задаёт идею, а дизайнер её прорабатывает.
4. Проекты в стол.
5. Переработки.
6. Мысль о несерьёзности работы. Когда студия дизайна кажется менее серьёзным бизнесом, чем завод или заправка.
7. Финансовый потолок. Чтобы каждый год удваивать или утраивать доход, надо становиться управленцем в виде артдиректора или создавать своё агентство.
8. Отчуждённость труда. Ваш дизайн — деталь для машины, которая состоит из кучи других деталей и на которой зарабатывает другой человек (заказчик).
Если перечисленное выше есть в вашей работе, будьте внимательны.
https://designpub.ru/588259b30142
Михаил Греков написал, как появляются заботливые продукты, о которых хочется рассказать друзьям.
Заботливый продукт снимает циклическую боль. Часто бывает, что боль вымышленная или порождена самим продуктом. В этих случаях забота — это хорошо, но не настолько, чтобы был вау-эффект.
Боль порождена продуктом:
— При медленной загрузке приложение «Кухня на районе» показывает заботливые сообщения о том, что происходит.
— Каршеринг BelkaCar присылает уведомление о том, что пользователь не довёл процесс завершения аренды до конца.
Примеры заботы, вызывающей вау-эффект:
— Лондонский убер ViaVan за 2 минуты до конца поездки напоминает, что скоро выходить. Боль: поездка заканчивается для пассажиров внезапно, и они покидают такси в спешке, забывая свои вещи.
— Магазин «Лабиринт» сообщает, что покупатель выбрал доставку на праздничный день. Боль: покупатели забывают, что будет выходной, и не могут получить заказ, так как куда-нибудь уезжают.
— Ещё примеры смотрите в статье.
https://designpub.ru/a3ea75f4a129
Заботливый продукт снимает циклическую боль. Часто бывает, что боль вымышленная или порождена самим продуктом. В этих случаях забота — это хорошо, но не настолько, чтобы был вау-эффект.
Боль порождена продуктом:
— При медленной загрузке приложение «Кухня на районе» показывает заботливые сообщения о том, что происходит.
— Каршеринг BelkaCar присылает уведомление о том, что пользователь не довёл процесс завершения аренды до конца.
Примеры заботы, вызывающей вау-эффект:
— Лондонский убер ViaVan за 2 минуты до конца поездки напоминает, что скоро выходить. Боль: поездка заканчивается для пассажиров внезапно, и они покидают такси в спешке, забывая свои вещи.
— Магазин «Лабиринт» сообщает, что покупатель выбрал доставку на праздничный день. Боль: покупатели забывают, что будет выходной, и не могут получить заказ, так как куда-нибудь уезжают.
— Ещё примеры смотрите в статье.
https://designpub.ru/a3ea75f4a129
Дизайн-кабак
Продукты, в которых забота о пользователях вышла за рамки
или как сделать так, чтобы пользователи сказали “Вау!”
Графдизайнер Мэрилин Во написала, как фриланс превратить в бизнес.
1. Не фокусируйтесь на том, чем ваши навыки могут быть полезны людям. Фокусируйтесь на том, с какими проблемами они сталкиваются.
2. Собирайте клиентскую базу. Возможно, сначала придётся делать всё от логотипов до упаковки и иллюстраций или даже работать бесплатно.
Мэрилин договаривалась с компаниями о сотрудничестве, искала, что она может улучшить, и присылала результаты с разрешением использовать на своё усмотрение.
Люди работают с теми, кого знают и кому доверяют. Бесплатные услуги помогают познакомиться с потенциальными клиентами.
3. Выберите специализацию. Так глубже погружаешься в тему и выделяешься на фоне других. Вы уже знаете, с какими проблемами сталкиваются клиенты. Попытайтесь понять, часто ли с ними сталкиваются другие люди.
Иногда углубляешься в перспективную нишу, но понимаешь, что в ней не так интересно, как в других. Мэрилин помогает вопрос: если бизнес в этой нише в долгосрочной перспективе будет прибыльным, сможет ли она вести тот образ жизни, к которому стремится?
4. Упакуйте предложение: опишите процесс, итоговые артефакты, насколько вы готовы менять это по желанию клиентов.
5. Поймите, сколько вам стоит оказание типовой услуги (ваше время, расходные материалы и т.п.). Старайтесь назначать цену от возможностей клиента. Закладывайте в оценку инвестиции в автоматизацию и новые инструменты.
6. Прокачивайте коммуникации, сервис и продажи, чтобы качественно выделяться на фоне других студий.
7. Систематизируйте процессы, готовьте чеклисты.
https://spark.ru/startup/redaktsiya-spark-ru/blog/47689/
1. Не фокусируйтесь на том, чем ваши навыки могут быть полезны людям. Фокусируйтесь на том, с какими проблемами они сталкиваются.
2. Собирайте клиентскую базу. Возможно, сначала придётся делать всё от логотипов до упаковки и иллюстраций или даже работать бесплатно.
Мэрилин договаривалась с компаниями о сотрудничестве, искала, что она может улучшить, и присылала результаты с разрешением использовать на своё усмотрение.
Люди работают с теми, кого знают и кому доверяют. Бесплатные услуги помогают познакомиться с потенциальными клиентами.
3. Выберите специализацию. Так глубже погружаешься в тему и выделяешься на фоне других. Вы уже знаете, с какими проблемами сталкиваются клиенты. Попытайтесь понять, часто ли с ними сталкиваются другие люди.
Иногда углубляешься в перспективную нишу, но понимаешь, что в ней не так интересно, как в других. Мэрилин помогает вопрос: если бизнес в этой нише в долгосрочной перспективе будет прибыльным, сможет ли она вести тот образ жизни, к которому стремится?
4. Упакуйте предложение: опишите процесс, итоговые артефакты, насколько вы готовы менять это по желанию клиентов.
5. Поймите, сколько вам стоит оказание типовой услуги (ваше время, расходные материалы и т.п.). Старайтесь назначать цену от возможностей клиента. Закладывайте в оценку инвестиции в автоматизацию и новые инструменты.
6. Прокачивайте коммуникации, сервис и продажи, чтобы качественно выделяться на фоне других студий.
7. Систематизируйте процессы, готовьте чеклисты.
https://spark.ru/startup/redaktsiya-spark-ru/blog/47689/
SPARK
Как я начала свой бизнес: из фрилансеров в предприниматели
Перевод заметки бывшего фрилансера, которая за четыре с лишним года вырастила свой бизнес в сфере графического дизайна и наладила работу так, чтобы свести свою роль в нем к минимуму. ...
Сергей Абдульманов написал о простых интерфейсных решениях, упрощающих жизнь пользователя.
1. Возможность в форме заказа ввести номер телефона в любом формате, даже буквами. С телефоном разберётся менеджер, а если не разберётся или телефон не указан, связаться с клиентом можно по почте.
2. Если идентифицировать клиента можно по номеру телефона, почте и номеру бонусной карты, пусть он вводит в поле «логин» то, что хочет. Система сама разберётся.
3. Если пользователь ввёл в форме входа адрес электронной почты, а потом перешёл к форме восстановления пароля, в ней уже должен быть этот адрес. На сайте «Мосигры» ссылка «Я забыл пароль» не открывает новую форму, а сразу отправляет нужное письмо на адрес, введённый в поле входа.
4. В письме «Восстановление пароля» можно написать номер телефона для связи. Возможно, клиенту не нужен личный кабинет (и пароль от него), чтобы решить свою задачу.
5. Не стоит с помощью КЛАДРа приводить адрес к нормализованной форме во время ввода. Лучше использовать его для подсказки, когда улицы с таким названием есть в разных районах города или с таким названием есть и проезд, и переулок.
6. Если вам нужно знать ближайшее к адресу доставки метро, не спрашивайте пользователя, а берите его по API у Яндекс-карт.
7. Если пользователь ввёл в поле поиска n символов и получил несколько подсказок для поисковых запросов, а затем ввёл ещё один символ и не получил ни одной подсказки, возможно, произошла опечатка. В этом случае стоит показывать старые подсказки, актуальные для n символов.
https://habr.com/ru/company/mosigra/blog/256601/
1. Возможность в форме заказа ввести номер телефона в любом формате, даже буквами. С телефоном разберётся менеджер, а если не разберётся или телефон не указан, связаться с клиентом можно по почте.
2. Если идентифицировать клиента можно по номеру телефона, почте и номеру бонусной карты, пусть он вводит в поле «логин» то, что хочет. Система сама разберётся.
3. Если пользователь ввёл в форме входа адрес электронной почты, а потом перешёл к форме восстановления пароля, в ней уже должен быть этот адрес. На сайте «Мосигры» ссылка «Я забыл пароль» не открывает новую форму, а сразу отправляет нужное письмо на адрес, введённый в поле входа.
4. В письме «Восстановление пароля» можно написать номер телефона для связи. Возможно, клиенту не нужен личный кабинет (и пароль от него), чтобы решить свою задачу.
5. Не стоит с помощью КЛАДРа приводить адрес к нормализованной форме во время ввода. Лучше использовать его для подсказки, когда улицы с таким названием есть в разных районах города или с таким названием есть и проезд, и переулок.
6. Если вам нужно знать ближайшее к адресу доставки метро, не спрашивайте пользователя, а берите его по API у Яндекс-карт.
7. Если пользователь ввёл в поле поиска n символов и получил несколько подсказок для поисковых запросов, а затем ввёл ещё один символ и не получил ни одной подсказки, возможно, произошла опечатка. В этом случае стоит показывать старые подсказки, актуальные для n символов.
https://habr.com/ru/company/mosigra/blog/256601/
Хабр
Интерфейсы «пользователю надо – всё равно пройдёт»
Вот комикс «приключения одного пользователя в форме заказа»: Есть такие интерфейсы, которые проходят до конца 100 из 100 пользователей. Но до батареи доезжаю...
Баухаус — легендарная школа искусств эпохи модернизма. Её основатель Вальтер Гропиус хотел объединить искусство с промышленностью и сделать его частью повседневной жизни. Он хотел производить товары массового потребления с привлекательным дизайном, которые преображали бы интерьеры домов и город в целом.
В экспериментальных мастерских студенты работали под присмотром мастеров — передовых деятелей дизайна или искусства. Гропиус пригласил преподавать Пауля Клее и Василия Кандинского, занятия в мастерской по металлу вели венгерский авангардист Ласло Мохой-Надь и известный дизайнер Марианна Брандт. Гюнта Штольц была преподавателем текстильного отделения.
Баухаус существовал всего 14 лет во время Веймарской республики в Германии. Вооружённая полиция в апреле 1933 года разгромила здание, и школа была закрыта.
https://www.youtube.com/watch?v=qRNn2Z1INl8
В экспериментальных мастерских студенты работали под присмотром мастеров — передовых деятелей дизайна или искусства. Гропиус пригласил преподавать Пауля Клее и Василия Кандинского, занятия в мастерской по металлу вели венгерский авангардист Ласло Мохой-Надь и известный дизайнер Марианна Брандт. Гюнта Штольц была преподавателем текстильного отделения.
Баухаус существовал всего 14 лет во время Веймарской республики в Германии. Вооружённая полиция в апреле 1933 года разгромила здание, и школа была закрыта.
https://www.youtube.com/watch?v=qRNn2Z1INl8
YouTube
Баухаус: Лицо двадцатого века / Bauhaus: The face of the twentieth century
Баухаус: Лицо двадцатого века / Bauhaus: The face of the twentieth century
Документальный фильм. 1994 год.
Режиссер: Фрэнк Уитфорд
Документальный фильм. 1994 год.
Режиссер: Фрэнк Уитфорд
Адил Сиддики написал, как улучшить опыт мобильных платежей.
1. Не размещайте подписи к полям в плейсхолдерах.
2. Если пользователь должен заполнить поле, автоматически перемещайте фокус на это поле.
3. Если в поле надо вводить только цифры, отображайте цифровую клавиатуру.
4. Как только пользователь заполнил поле, перемещайте фокус на следующее.
5. Размещайте кнопку платежа на видном месте. Стоит учесть, что при заполнении полей формы клавиатура может закрывать часть экрана.
6. Добавьте иконки безопасности и надписи вроде «100% Secure».
7. Если поле заполнено некорректно, показывайте сообщение об ошибке сразу после его заполнения.
8. После того как пользователь нажимает «Заплатить», моментально давайте обратную связь: блокируйте кнопку от дальнейших нажатий и показывайте на ней сообщение об обработке запроса или показывайте следующий экран.
9. Если платёж не прошёл, чётко сообщите об этом и дайте возможность повторить платёж или обратиться за помощью.
10. Пишите на кнопке платежа, что произойдёт после нажатия: «Pay $100», «Save card & pay $100».
11. Если платёж прошёл, наглядно сообщите об этом. И только потом показывайте остальные детали.
12. Дайте пользователю возможность быстро очистить поле.
— Перевод: https://ux.pub/rekomendatsii-dlya-uluchsheniya-opyta-tsifrovyh-platezhey/
— Картинки с примерами лучше смотреть в оригинальной статье: https://adilsiddiqui.in/x/designing-for-digital-payments
1. Не размещайте подписи к полям в плейсхолдерах.
2. Если пользователь должен заполнить поле, автоматически перемещайте фокус на это поле.
3. Если в поле надо вводить только цифры, отображайте цифровую клавиатуру.
4. Как только пользователь заполнил поле, перемещайте фокус на следующее.
5. Размещайте кнопку платежа на видном месте. Стоит учесть, что при заполнении полей формы клавиатура может закрывать часть экрана.
6. Добавьте иконки безопасности и надписи вроде «100% Secure».
7. Если поле заполнено некорректно, показывайте сообщение об ошибке сразу после его заполнения.
8. После того как пользователь нажимает «Заплатить», моментально давайте обратную связь: блокируйте кнопку от дальнейших нажатий и показывайте на ней сообщение об обработке запроса или показывайте следующий экран.
9. Если платёж не прошёл, чётко сообщите об этом и дайте возможность повторить платёж или обратиться за помощью.
10. Пишите на кнопке платежа, что произойдёт после нажатия: «Pay $100», «Save card & pay $100».
11. Если платёж прошёл, наглядно сообщите об этом. И только потом показывайте остальные детали.
12. Дайте пользователю возможность быстро очистить поле.
— Перевод: https://ux.pub/rekomendatsii-dlya-uluchsheniya-opyta-tsifrovyh-platezhey/
— Картинки с примерами лучше смотреть в оригинальной статье: https://adilsiddiqui.in/x/designing-for-digital-payments
Алексей Берёзка написал про адаптацию приложения для людей с плохим зрением, которые увеличили на смартфоне размер шрифта.
Можно использовать динамические текстовые стили вместо статичных и научить интерфейс растягиваться под разные размеры шрифтов. В результате текст увеличится, но приложение станет неудобным.
Алексей на примере показал, что можно изменить в компоновке, контенте и контролах приложения с увеличенными шрифтами.
«На большом кегле [заголовок акции] не влезет ну вообще никак. Если сделать верхнюю оранжевую панель резиновой и позволить ему в большом кегле занимать несколько строк, то верхний блок отъест половину экрана даже на больших айфонах, а про 4S вообще можно будет не вспоминать. Это не дело.
Можно поиграть с лейаутом внутри ячейки акции: сделать картинку квадратной, а освободившееся место занять заголовком. Но картинки для акций подгоняются под конкретный формат и будут некорректно показываться в другом. Так нельзя.
Так, а можно ж опять полностью убрать картинки и всё место занять заголовком».
https://habr.com/ru/company/dodopizzaio/blog/452226/
Можно использовать динамические текстовые стили вместо статичных и научить интерфейс растягиваться под разные размеры шрифтов. В результате текст увеличится, но приложение станет неудобным.
Алексей на примере показал, что можно изменить в компоновке, контенте и контролах приложения с увеличенными шрифтами.
«На большом кегле [заголовок акции] не влезет ну вообще никак. Если сделать верхнюю оранжевую панель резиновой и позволить ему в большом кегле занимать несколько строк, то верхний блок отъест половину экрана даже на больших айфонах, а про 4S вообще можно будет не вспоминать. Это не дело.
Можно поиграть с лейаутом внутри ячейки акции: сделать картинку квадратной, а освободившееся место занять заголовком. Но картинки для акций подгоняются под конкретный формат и будут некорректно показываться в другом. Так нельзя.
Так, а можно ж опять полностью убрать картинки и всё место занять заголовком».
https://habr.com/ru/company/dodopizzaio/blog/452226/
Хабр
Заголовок будет другой
Если вы разрабатываете продукт для масс-маркета, то вероятнее всего им пользуются люди с плохим зрением. Если вы стремитесь делать удобные интерфейсы, то надо сделать удобно для всех клиентов, в том...
Лиза Мария Мартин предложила шаблон для аудита структуры сайта, который может пригодиться при редизайне или поиске проблем текущей структуры.
Таблица включает:
— Разделённые по уровням вложенности страницы сайта;
— Страницы, доступные через ссылки в контенте, а не через меню;
— Внешние ссылки в меню, которые ведут за пределы сайта;
— Файлы;
— Страницы, которые по URL принадлежат к одному разделу, а по навигационной схеме — к другому;
— Дублирующие ссылки — чтобы не записывать одинаковую информацию о странице дважды, но знать, где они есть, чтобы отследить разные пути к контенту.
Указанные выше типы элементов закодированы цветом.
По каждой странице отображаются:
— ID;
— URL;
— Название пункта меню или текст ссылки;
— Заголовок страницы, который видит пользователь;
— Заголовок страницы, указанный в метаданных;
— Наименование раздела;
— Примечания.
#audit
Таблица включает:
— Разделённые по уровням вложенности страницы сайта;
— Страницы, доступные через ссылки в контенте, а не через меню;
— Внешние ссылки в меню, которые ведут за пределы сайта;
— Файлы;
— Страницы, которые по URL принадлежат к одному разделу, а по навигационной схеме — к другому;
— Дублирующие ссылки — чтобы не записывать одинаковую информацию о странице дважды, но знать, где они есть, чтобы отследить разные пути к контенту.
Указанные выше типы элементов закодированы цветом.
По каждой странице отображаются:
— ID;
— URL;
— Название пункта меню или текст ссылки;
— Заголовок страницы, который видит пользователь;
— Заголовок страницы, указанный в метаданных;
— Наименование раздела;
— Примечания.
#audit
Ралука Будиу из Nielsen Norman Group написала, как сделать удобный чат с клиентами.
Кнопка чата:
1. Размещайте ссылку на чат на странице «Контакты» и на странице товара. Иногда покупателям нужна дополнительная информация о товаре.
2. Не оставляйте плавающую кнопку единственным способом открыть чат.
3. Эта кнопка должна выделяться и располагаться в правом нижнем углу экрана.
4. Пишите, что кнопка открывает чат. Если написать «Задать вопрос», пользователь может проигнорировать её, решив, что кнопка открывает форму обратной связи.
Сам чат:
5. Если клиент пишет со смартфона, ожидание должно быть минимальным, так как ему сложнее заниматься чем-то ещё параллельно.
6. Сообщайте пользователю, через какое время он получит ответ.
7. Отображайте надпись, что оператор пишет сообщение, но не показывайте её слишком долго. Если подготовка ответа затянется, напишите клиенту, что оператор ещё работает над вопросом.
8. Визуально разделяйте сообщения от разных участников чата. Например, свои сообщения, ответы оператора и автоматические ответы.
9. Предусмотрите проблемы с подключением к сети. Если пользователь возобновляет прерванную сессию, прогресс работы над его вопросом должен сохраниться. Можно заранее спросить у клиента номер телефона для продолжения диалога в офлайне.
10. Не заставляйте клиента повторять то, что он уже сообщил ранее.
11. Оператор может переходить к конкретике сразу и писать «Привет! Чем могу помочь?» вместо «Привет! Как дела?». Совет актуален для стран, где не вежливо сразу говорить о деле.
12. Предупреждайте, если с пользователем будет общаться бот.
13. Оператор не должен злоупотреблять шаблонными ответами. Люди любят живое и не слишком формальное общение.
14. Ответы на типовые вопросы должны появляться максимально быстро.
15. Не отправляйте клиента читать те или иные страницы сайта. Уточняйте, чего он хочет, и давайте конкретные ответы. Если пользователь решился на чат, возможно, найденные на сайте ответы его не удовлетворили.
Полезные возможности чата:
16. Загрузка в чат документов.
17. Сохранение всего диалога в отдельный файл.
https://vc.ru/design/69554
Кнопка чата:
1. Размещайте ссылку на чат на странице «Контакты» и на странице товара. Иногда покупателям нужна дополнительная информация о товаре.
2. Не оставляйте плавающую кнопку единственным способом открыть чат.
3. Эта кнопка должна выделяться и располагаться в правом нижнем углу экрана.
4. Пишите, что кнопка открывает чат. Если написать «Задать вопрос», пользователь может проигнорировать её, решив, что кнопка открывает форму обратной связи.
Сам чат:
5. Если клиент пишет со смартфона, ожидание должно быть минимальным, так как ему сложнее заниматься чем-то ещё параллельно.
6. Сообщайте пользователю, через какое время он получит ответ.
7. Отображайте надпись, что оператор пишет сообщение, но не показывайте её слишком долго. Если подготовка ответа затянется, напишите клиенту, что оператор ещё работает над вопросом.
8. Визуально разделяйте сообщения от разных участников чата. Например, свои сообщения, ответы оператора и автоматические ответы.
9. Предусмотрите проблемы с подключением к сети. Если пользователь возобновляет прерванную сессию, прогресс работы над его вопросом должен сохраниться. Можно заранее спросить у клиента номер телефона для продолжения диалога в офлайне.
10. Не заставляйте клиента повторять то, что он уже сообщил ранее.
11. Оператор может переходить к конкретике сразу и писать «Привет! Чем могу помочь?» вместо «Привет! Как дела?». Совет актуален для стран, где не вежливо сразу говорить о деле.
12. Предупреждайте, если с пользователем будет общаться бот.
13. Оператор не должен злоупотреблять шаблонными ответами. Люди любят живое и не слишком формальное общение.
14. Ответы на типовые вопросы должны появляться максимально быстро.
15. Не отправляйте клиента читать те или иные страницы сайта. Уточняйте, чего он хочет, и давайте конкретные ответы. Если пользователь решился на чат, возможно, найденные на сайте ответы его не удовлетворили.
Полезные возможности чата:
16. Загрузка в чат документов.
17. Сохранение всего диалога в отдельный файл.
https://vc.ru/design/69554
vc.ru
Сделать удобный чат с клиентами: 21 рекомендация по дизайну
Предупреждайте о ботах, сделайте заметнее кнопку, вызывающую диалог, — и другие советы в конспекте материала директора по исследованиям Nielsen Norman Group Ралуки Будиу.
Анна Кочеткова рассказала, как писать хороший интерфейсный текст с примерами из банковской сферы.
Продумывайте контент на этапе проектирования, так как он может повлиять на дизайн.
Например, дизайнер создал лёгкий интерфейс с тарифами. Пакеты услуг стоят недёшево, клиент будет изучать условия и подробности, прежде чем покупать их. Дизайнер не знал этого, и важные для клиента условия оказались в неудобных всплывающих подсказках.
Чтобы пользователи читали текст, он должен быть простым, кратким и хорошо структурированным.
В 1997 году Якоб Нильсен тестировал текст про достопримечательности Небраски:
— Из базового варианта убрали лишние подробности и цифры, читаемость выросла на 58%.
— Текст не трогали, но достопримечательности собрали в ненумерованный список, +47%.
— В базовом варианте сложные слова заменили простыми, +27%.
— Объединение этих вариантов дало увеличение читаемости на 120% (в 2,2 раза).
В статье много примеров понятных и простых формулировок для банковской сферы.
https://medium.com/nancypong/6d66fa378a1f
Продумывайте контент на этапе проектирования, так как он может повлиять на дизайн.
Например, дизайнер создал лёгкий интерфейс с тарифами. Пакеты услуг стоят недёшево, клиент будет изучать условия и подробности, прежде чем покупать их. Дизайнер не знал этого, и важные для клиента условия оказались в неудобных всплывающих подсказках.
Чтобы пользователи читали текст, он должен быть простым, кратким и хорошо структурированным.
В 1997 году Якоб Нильсен тестировал текст про достопримечательности Небраски:
— Из базового варианта убрали лишние подробности и цифры, читаемость выросла на 58%.
— Текст не трогали, но достопримечательности собрали в ненумерованный список, +47%.
— В базовом варианте сложные слова заменили простыми, +27%.
— Объединение этих вариантов дало увеличение читаемости на 120% (в 2,2 раза).
В статье много примеров понятных и простых формулировок для банковской сферы.
https://medium.com/nancypong/6d66fa378a1f
Medium
Тексты для интерфейса: как пишут контент в Тинькофф Бизнес
Вы читаете конспект выступления Анны Кочетковой, редактора интерфейсов Тинькофф Бизнес, на онлайн-конференции UX Марафон. Запись Марафона…
Forwarded from Френч-пресс
60% необходимых знаний вы получаете за первые 40% срока, запланированного для проекта, к этому моменту проект выполнен на 25%. Начальство или заказчик может сказать следующее: «Вы потратили 40% времени, а сделали 25% проекта. Дело плохо».
При итеративной разработке важно в самом начале накопить знания. Чтобы объяснить полезность этой работы, можно взять список рисков, составленный в самом начале: малоизученные технологии, интеграции со сторонними системами и всё то, что может принести проблемы в процессе разработки. И показать, как эти риски были уменьшены или устранены.
Из книги Джо Мараско «IT-проекты: фронтовые очерки». Джо — один из руководителей компании Rational Software, где придумали UML.
При итеративной разработке важно в самом начале накопить знания. Чтобы объяснить полезность этой работы, можно взять список рисков, составленный в самом начале: малоизученные технологии, интеграции со сторонними системами и всё то, что может принести проблемы в процессе разработки. И показать, как эти риски были уменьшены или устранены.
Из книги Джо Мараско «IT-проекты: фронтовые очерки». Джо — один из руководителей компании Rational Software, где придумали UML.
Илья Бирман написал про иконки «ленточка» (закладка), «сердечко», «поднятый большой палец» и «звёздочка».
«Ленточка означает, что ты хочешь запомнить эту страницу и упростить себе повторный доступ к ней. Вероятно, где‑то в интерфейсе есть список сохранённых страниц. Или страницы с закладками хотя бы выделены в оглавлении, и ты можешь быстро их найти. Мы не ожидаем, что наши закладки увидит кто‑то другой.
Сердечко просто выражает твоё отношение к предмету: «нравится». В интерфейсе могут быть места, где собраны понравившиеся страницы, но по умолчанию этого никто не обещает. При этом твоё отношение, вероятно, будет передано автору страницы и может быть использовано в рекомендациях другим читателям. Мы не ожидаем, что наши сердечки останутся нашим частным делом.
Поднятый большой палец не просто выражает отношение к предмету, но и сообщает его автору. Мы ожидаем, что автору точно покажут, что люди жмут на эту иконку. Мы даже не думаем использовать это как способ «сохранить» понравившуюся страницу.
Звёздочка — это джокер. Она может значить что угодно и работать как угодно.
Смысл этих символов и наши ожидания от них меняются с развитием популярных продуктов».
https://bureau.ru/soviet/20190611/
«Ленточка означает, что ты хочешь запомнить эту страницу и упростить себе повторный доступ к ней. Вероятно, где‑то в интерфейсе есть список сохранённых страниц. Или страницы с закладками хотя бы выделены в оглавлении, и ты можешь быстро их найти. Мы не ожидаем, что наши закладки увидит кто‑то другой.
Сердечко просто выражает твоё отношение к предмету: «нравится». В интерфейсе могут быть места, где собраны понравившиеся страницы, но по умолчанию этого никто не обещает. При этом твоё отношение, вероятно, будет передано автору страницы и может быть использовано в рекомендациях другим читателям. Мы не ожидаем, что наши сердечки останутся нашим частным делом.
Поднятый большой палец не просто выражает отношение к предмету, но и сообщает его автору. Мы ожидаем, что автору точно покажут, что люди жмут на эту иконку. Мы даже не думаем использовать это как способ «сохранить» понравившуюся страницу.
Звёздочка — это джокер. Она может значить что угодно и работать как угодно.
Смысл этих символов и наши ожидания от них меняются с развитием популярных продуктов».
https://bureau.ru/soviet/20190611/
Бюро Горбунова
Иконка закладки: ленточка или сердечко?
Иконка закладки: ленточка или сердечко?
Павел Шерер почти закончил цикл статей о дизайне данных.
Цикл в большей степени рассчитан на дизайнеров и проектировщиков, но может оказаться полезен и кодерам (начинающим и мидлам), если они хотят стать полноценными продуктовыми дизайнерами.
1. Что и зачем? Статья объясняет, что такое дизайн данных (не инфографика и не информационная архитектура), как он влияет на UX и зачем им надо заниматься.
https://sherer.pro/blog/dizajn-dannyh-chast-1-chto-i-zachem/
2. Как? Как происходит работа над дизайном данных, что при этом надо учитывать и какие знания понадобятся. Пример создания диаграммы, описывающей сущности продукта и их свойства, какие с ними возможны действия, места их хранения.
https://sherer.pro/blog/dizajn-dannyh-chast-2-kak/
3. Меняемся? Статья посвящена обмену данными между компонентами системы: методы, параметры, заголовки и так далее.
https://sherer.pro/blog/dizajn-dannyh-chast-3-menjaemsja/
4. Матчасть: основы. Про способы хранения данных, протоколы и форматы обмена, типы данных.
https://sherer.pro/blog/dizajn-dannyh-chast-4-matchast-osnovy/
5. Матчасть: базы данных. Про виды связей, виды баз данных, ER-диаграммы.
https://sherer.pro/blog/dizajn-dannyh-chast-5-matchast-bazy-dannyh/
6. Матчасть: API. Про виды и философию API, типы указания метода, форматы передачи, http-методы.
https://sherer.pro/blog/dizajn-dannyh-chast-6-matchast-api/
7. Прототипирование (статья ещё не закончена).
Цикл в большей степени рассчитан на дизайнеров и проектировщиков, но может оказаться полезен и кодерам (начинающим и мидлам), если они хотят стать полноценными продуктовыми дизайнерами.
1. Что и зачем? Статья объясняет, что такое дизайн данных (не инфографика и не информационная архитектура), как он влияет на UX и зачем им надо заниматься.
https://sherer.pro/blog/dizajn-dannyh-chast-1-chto-i-zachem/
2. Как? Как происходит работа над дизайном данных, что при этом надо учитывать и какие знания понадобятся. Пример создания диаграммы, описывающей сущности продукта и их свойства, какие с ними возможны действия, места их хранения.
https://sherer.pro/blog/dizajn-dannyh-chast-2-kak/
3. Меняемся? Статья посвящена обмену данными между компонентами системы: методы, параметры, заголовки и так далее.
https://sherer.pro/blog/dizajn-dannyh-chast-3-menjaemsja/
4. Матчасть: основы. Про способы хранения данных, протоколы и форматы обмена, типы данных.
https://sherer.pro/blog/dizajn-dannyh-chast-4-matchast-osnovy/
5. Матчасть: базы данных. Про виды связей, виды баз данных, ER-диаграммы.
https://sherer.pro/blog/dizajn-dannyh-chast-5-matchast-bazy-dannyh/
6. Матчасть: API. Про виды и философию API, типы указания метода, форматы передачи, http-методы.
https://sherer.pro/blog/dizajn-dannyh-chast-6-matchast-api/
7. Прототипирование (статья ещё не закончена).
Павел Шерер
Дизайн данных (часть 1). Что и зачем? — Павел Шерер
Этим коротким постом я запускаю целый цикл статей, посвященных одной из самых туманных и не по праву обделенных вниманием областей проектирования - дизайну данных.
Валерий Пеньков из томской «Студии Т» поговорил с Сергеем Прокофьевым, исполнительным директором CreativePeople.
— Про ранние годы компании, начинавшей с 4 сотрудников и офиса на чердаке.
— Снижение костов в 2007-м году и перенос офиса в квартиру в Медведково (с клиентами пили чай на кухне), что позволило легко пережить кризисный 2008-й.
— Партнёрство с другими студиями: часть пресейла и рекомендательная история, совместные проекты, аутсорсинг, помощь в выстраивании процессов. Чтобы стать партнёром, надо специализироваться на определённых задачах.
— Проект для офиса Мегафона с иллюстрациями, посвящёнными разным городам России. Стоимость иллюстраций.
— Самое длительное сотрудничество с клиентом (Эконика).
— Объединение разных компетенций: по ключевому спектру задач они больше диджитал-агентство, чем креативное. Основная тема — UX/UI, но креативная история тоже актуальна.
— Удалённый формат работы: практикуют и относятся хорошо, хоть есть и свои истории про продолбанного флешера. Удалённых арт-директоров нет, но есть дизайнеры и даже пара менеджеров. Трекинг времени — стандартная практика (не только для удалёнщиков), но без записи экрана. Важно, как закрываешь задачи.
— Поиск кадров: в Москве искать сложно, берут из регионов. Сложно конкурировать с инхаус-командами, ДМС и спортзал решают.
— Участие в тендерах.
— Зарплаты: их обсуждение в агентстве запрещено. На базовой позиции можно зарабатывать 30 тысяч. Важно расти, тогда будут расти и доходы. За полгода-год можно вырасти в 2 раза, но дальше — медленнее.
— Возможность обучения — то, что привлекает новых сотрудников.
https://www.youtube.com/watch?v=GiyRQa0a-vM
— Про ранние годы компании, начинавшей с 4 сотрудников и офиса на чердаке.
— Снижение костов в 2007-м году и перенос офиса в квартиру в Медведково (с клиентами пили чай на кухне), что позволило легко пережить кризисный 2008-й.
— Партнёрство с другими студиями: часть пресейла и рекомендательная история, совместные проекты, аутсорсинг, помощь в выстраивании процессов. Чтобы стать партнёром, надо специализироваться на определённых задачах.
— Проект для офиса Мегафона с иллюстрациями, посвящёнными разным городам России. Стоимость иллюстраций.
— Самое длительное сотрудничество с клиентом (Эконика).
— Объединение разных компетенций: по ключевому спектру задач они больше диджитал-агентство, чем креативное. Основная тема — UX/UI, но креативная история тоже актуальна.
— Удалённый формат работы: практикуют и относятся хорошо, хоть есть и свои истории про продолбанного флешера. Удалённых арт-директоров нет, но есть дизайнеры и даже пара менеджеров. Трекинг времени — стандартная практика (не только для удалёнщиков), но без записи экрана. Важно, как закрываешь задачи.
— Поиск кадров: в Москве искать сложно, берут из регионов. Сложно конкурировать с инхаус-командами, ДМС и спортзал решают.
— Участие в тендерах.
— Зарплаты: их обсуждение в агентстве запрещено. На базовой позиции можно зарабатывать 30 тысяч. Важно расти, тогда будут расти и доходы. За полгода-год можно вырасти в 2 раза, но дальше — медленнее.
— Возможность обучения — то, что привлекает новых сотрудников.
https://www.youtube.com/watch?v=GiyRQa0a-vM
YouTube
Одной ногой в CreativePeople / Сергей Прокофьев
Сходили в гости к ребятам из CreativePeople.
Небольшой обзор офиса, рассказ о цифрах, процессах и услугах.
И почти часовое интервью с исполнительным директором — Сергеем Прокофьевым. Подробный тайминг вопросов в первом комментарии.
Первый полноценный выпуск!…
Небольшой обзор офиса, рассказ о цифрах, процессах и услугах.
И почти часовое интервью с исполнительным директором — Сергеем Прокофьевым. Подробный тайминг вопросов в первом комментарии.
Первый полноценный выпуск!…
Джон Мур создал более 10 тысяч интерфейсных экранов (видимо, по аналогии с «правилом 10 тысяч часов») и вот что понял:
1. Начинайте с главного. Тупиковые сценарии, крайние состояния, анимации — это не главное в интерфейсе.
2. Не изобретайте велосипед, используйте привычные интерфейсные решения.
3. Соберите коллекцию элементов и решений, которые вы часто используете в своих проектах.
4. Чем более последовательный и согласованный дизайн вы создаёте, тем быстрее вы работаете. Например, в Скетче создавайте новые кнопки через символ, а не с нуля.
5. Собирайте ускоряющие работу приёмы: дизайнерские ресурсы, чеклисты, принципы вроде использования 8-пиксельной сетки.
6. Дизайн не должен быть самоцелью. Решайте правильные задачи для правильных людей.
7. Помните, что вы — не пуп земли.
8. Научитесь презентовать свой дизайн.
9. Выпускайте продукты. Несовершенный выпущенный продукт лучше, чем не выпущенный идеальный.
https://ux-journal.ru/10-ux-tatuirovok.html
1. Начинайте с главного. Тупиковые сценарии, крайние состояния, анимации — это не главное в интерфейсе.
2. Не изобретайте велосипед, используйте привычные интерфейсные решения.
3. Соберите коллекцию элементов и решений, которые вы часто используете в своих проектах.
4. Чем более последовательный и согласованный дизайн вы создаёте, тем быстрее вы работаете. Например, в Скетче создавайте новые кнопки через символ, а не с нуля.
5. Собирайте ускоряющие работу приёмы: дизайнерские ресурсы, чеклисты, принципы вроде использования 8-пиксельной сетки.
6. Дизайн не должен быть самоцелью. Решайте правильные задачи для правильных людей.
7. Помните, что вы — не пуп земли.
8. Научитесь презентовать свой дизайн.
9. Выпускайте продукты. Несовершенный выпущенный продукт лучше, чем не выпущенный идеальный.
https://ux-journal.ru/10-ux-tatuirovok.html
Продуктовый дизайн (UX/UI), брендинг и аналитика
10 UX-татуировок, которые я набил пока дизайнил 10 000 экранов интерфейсов
Советы, которые все дают новичкам в UI/UX, а они все равно не верят, пока не набьют собственных шишек.
Иван Васин и консультант Алишер Хасанов обсудили, что делать, чтобы бренд-бюро «Щука» стало зарабатывать больше. Ниже — не цитаты, а примерный пересказ отдельных витков разговора.
Иван: В некоторых проектах стали работать по часовым ставкам. Посчитали, сколько часов можем произвести, сколько из них продаётся и списывается, получили стоимость часа.
Западные клиенты работают только по часам. Российским некомфортно, когда нет фиксированной цены и нельзя забронировать сумму в бюджете.
При почасовой оплате не можешь получить сверхприбыль, зато получаешь предсказуемость. В «Щуке» это примерно половина оборота. Как понять, фикс или почасовка приносит нам больше прибыли?
Алишер: В случае с почасовой оплатой вы превращаетесь в аутсорсера. Вся ценность вашей работы превращается в N часов. Это тупиковый путь.
…
Иван: Есть сегмент компаний, которым наши компетенции дадут определённый результат. Среди 7 млрд людей достаточно тех, кому мы можем это предложить. Поэтому мы хотим, чтобы о нас узнало как можно больше людей, ездим в Нью-Йорк, Лондон, делаем громкие проекты.
Алишер: Можно делать проще. Не обязательно ездить, можно созваниваться. За то же время можно назначить 10 видеовстреч и поговорить с 10 потенциальными клиентами.
Надо делать это системно, развивать компетенцию поиска. Если сидеть и ждать, нельзя прогнозировать результат.
Иван: Сейчас машинка работает. Если создаёшь определённое количество инфоповодов, получаешь лиды. Сохраняя активность, получаешь нужного клиента в течение определённого периода времени.
Проблема с увеличением этой активности. Нанимаем копирайтера и дизайнера для оформления кейсов, выступаем на конференциях, преподаём, но это не даёт кратный рост.
Алишер: В моём подходе самое важное — понять, с кем вам нравится и с кем выгодно работать.
Для этого надо проанализировать текущих клиентов. Понять, кто из них самые классные, как они искали подрядчика, как вышли на вас, почему решили работать с вами, что им больше всего понравилось, что отличает вас от остальных.
Тогда вы понимаете, какие клиенты вам нужны, а также — свою ценность для них.
https://point.bangbangeducation.ru/columns/design-business
Иван: В некоторых проектах стали работать по часовым ставкам. Посчитали, сколько часов можем произвести, сколько из них продаётся и списывается, получили стоимость часа.
Западные клиенты работают только по часам. Российским некомфортно, когда нет фиксированной цены и нельзя забронировать сумму в бюджете.
При почасовой оплате не можешь получить сверхприбыль, зато получаешь предсказуемость. В «Щуке» это примерно половина оборота. Как понять, фикс или почасовка приносит нам больше прибыли?
Алишер: В случае с почасовой оплатой вы превращаетесь в аутсорсера. Вся ценность вашей работы превращается в N часов. Это тупиковый путь.
…
Иван: Есть сегмент компаний, которым наши компетенции дадут определённый результат. Среди 7 млрд людей достаточно тех, кому мы можем это предложить. Поэтому мы хотим, чтобы о нас узнало как можно больше людей, ездим в Нью-Йорк, Лондон, делаем громкие проекты.
Алишер: Можно делать проще. Не обязательно ездить, можно созваниваться. За то же время можно назначить 10 видеовстреч и поговорить с 10 потенциальными клиентами.
Надо делать это системно, развивать компетенцию поиска. Если сидеть и ждать, нельзя прогнозировать результат.
Иван: Сейчас машинка работает. Если создаёшь определённое количество инфоповодов, получаешь лиды. Сохраняя активность, получаешь нужного клиента в течение определённого периода времени.
Проблема с увеличением этой активности. Нанимаем копирайтера и дизайнера для оформления кейсов, выступаем на конференциях, преподаём, но это не даёт кратный рост.
Алишер: В моём подходе самое важное — понять, с кем вам нравится и с кем выгодно работать.
Для этого надо проанализировать текущих клиентов. Понять, кто из них самые классные, как они искали подрядчика, как вышли на вас, почему решили работать с вами, что им больше всего понравилось, что отличает вас от остальных.
Тогда вы понимаете, какие клиенты вам нужны, а также — свою ценность для них.
https://point.bangbangeducation.ru/columns/design-business