Sniper link
A way where the user opens directly email with password, and other emails are hidden
When it’s better to send verification email
As late as possible, when the user already got the value
When it’s better to ask the user to turn on notifications
After some value the user already got
Table design rules
- All text fields aligned left
- All numbers aligned right
- Monospaced numbers
- Never center alignment
- Headers aligned like their columns content
- Combine related data
- Column separators 1 px max and of light gray color
- Raws design approaches: zebra, lines, cards, no separators
- Vertical alignment — center if up to 3 lines and top alignment if more
- Freeze raws and columns
- Reorder and hide
- Raws height: condensed — 40, regular — 48, relaxed — 56
- Preferences preservation (for next session)
- Possibility to reset settings to default
How to show expandable data in the table rows
- Expandable rows (inline)
- Modals
- Sidebars
The factors of severity level
— The frequency with which the problem occurs: Is it common or rare?
— The impact of the problem if it occurs: Will it be easy or difficult for the users to overcome?
— The persistence of the problem: Is it a one-time problem that users can overcome once they know about it or will users repeatedly be bothered by the problem?
Normann’s stool
Solution which is based on the intersection of technology (resources), business needs and people’s needs
Double diamond framework
The two diamonds represent a process of exploring an issue more widely or deeply (divergent thinking) and then taking focused action (convergent thinking).
Задача рекламного текста
Представить полезную информацию о продукте, ответить на вопросы покупателя, объяснить полезное действие и показать сценарии использования продукта.
Дизайн-процессы
- Design thinking
- Human centered design
- Double diamond
- Service design
- Jobs-to-be-done
Design thinking process
- Ориентация на человека, понимание потребностей и желаний пользователя
- Командная работа и эксперименты
- Гибкость
Этапы
- Эмпатия
- Определение проблемы
- Генерация идей
- Прототипирование
- Тестирование
Human centered design
Понимание конкретных «болей» и их решение. Табуретка Нормана
Этапы
- Inspiration. Вдохновение, подготовка, контекст (отказываемся от всех предшествующих знаний, строим гипотезы)
- Ideation. Концепция (грубые наброски для проверки)
- Implementation. Реализация
Service design process
Цель — улучшить опыт получения услуг согласно потребностям пользователя.
Пример — супермаркет. Берем все точки соприкосновения.
Компоненты:
- Люди
- Реквизит
- Процессы
Этапы
- Определение субъектов, которые принимают участие в оказании/получении услуги
- Определение возможных сценариев
- Предоставление обновленной услуги
Jobs-to-be-done процесс
Базируется на концепции «работы», которую выполеяет продукт, и процессах, как пользователь «нанимает» продукт на работу
FFF
Fix time, fix budget, flex scope
Measuring Design KPIs
- We conduct research to discover the most important tasks. We study search queries and server logs, run user interviews and workshops with stakeholders.
- Once we have that list, we bring users in to vote on the tasks that they consider to be important for them. Then we write down task instructions for each top task. These instructions will be handed to users in usability tests to validate that they can actually complete these tasks successfully.
- Finally, we run tests with the same task instructions to the same segments of users, repeatedly, every 8–12 weeks. Based on these tests, we measure and plot success rates and completion times over time. As long as we improve our design KPIs, we should be on the right path.
Design KPIs
top tasks completion rates, top tasks completion times, accuracy of data submitted by users, ratio of content vs. navigation (mobile/desktop), error frequency, error recovery rate (= quality of error messages), speed of publishing, quality of leads, time to release, time to upgrade, conversion rate, carbon footprint impact, System Usability Scale Score (ideally over 75), accessibility score, web performance score
About countries and languages
Always decoupling country and language. Flag is a good idea for the country but not for a language.
About language selector
Users expect the language selector to be located in the header or in the footer of each page, and they often watch out for flags, “Globe” or “Translate” icons to find it.
Depending on amount of languages
If you have just a few languages, a drop-down overlay might be perfectly enough. If you need 10–15 languages, perhaps it’s worth exploring the option of a non-modal overlay with autocomplete. If there are even more options to display, consider using a standalone page, with countries grouped into tabs or accordions.
Filters best practices
- Never auto scroll users on a single input
- Never freeze the UI on a single input
- 🔥 Decouple filters and search results (render both of them separately)
- Display filters above the results
- Apply button makes sense on mobile devices
Floating labels
(Titles inside the inputs which stop be visible after the form is filled)
Almost always bad idea because of accessibility and autofill issues
Ideal birthday date form
Ideal date picker (except birthdate)
