Коли не знаєте, за що братися, починайте з основи. Коли стартуєте у дизайні мобільних застосунків, теж починайте з основи. З нею відкинете зайвий шум і зосередитеся на базових принципах, що роблять апки зручними.

🔹Пам’ятайте про «зону великого пальця»
• розміщуйте ключові дії так, щоб їх було легко досягти великим пальцем;
• розташовуйте важливі елементи дизайну в центральних частинах і нижній половині екрана.

🔹Інтуїтивна навігація — маст
• використовуйте навігаційні елементи та патерни, з якими юзери вже знайомі;
• переконайтеся, що юзери можуть без проблем відповісти на запитання «Де я?».

🔹Починайте дизайнити з екранів меншого розміру
• надавайте пріоритет маленьким екранам для кращого UX застосунку;
• розробляйте дизайн так, щоб його можна було масштабувати на більші пристрої.

🔹Давайте користувачам фідбек
• використовуйте тактильні, звукові або візуальні підказки;
• інформуйте користувачів про стан системи: підтверджуйте дії, попереджуйте про наслідки.

🔹Пам’ятайте про gesture UI
• використовуйте інтуїтивно зрозумілі та загальновідомі жести: swipe, drag, tap;
• тестуйте ці та інші жести з користувачами.

🔹Текст має бути читабельним
• не бійтесь робити шрифти більшими;
• пам’ятайте про ієрархію типографії. Недостатній контраст між основним текстом і заголовком та нехтування правилом близькості — найчастіші помилки.

🔹Не змушуйте користувачів вводити багато даних
• використовуйте степпери, чекбокси та автозаповнення, коли це можливо;
• не забувайте про перевірку полів та підказки.

🔹 Швидкість має значення
• знайдіть точки, коли користувачі чекають відгуку від інтерфейсу;
• подумайте, як їх обіграти — анімація пошуку або прелоадера краще, ніж пауза в кілька секунд без реакції на дії юзерів.

🔹Використовуйте нативні можливості мобільних операційних систем
• покращуйте UX за допомогою камери, GPS, Touch ID, Face ID, dynamic island тощо.

#гостьова_середа

А ви знаєте своїх користувачів? Ці базові методи й інструменти (та їх різні альтернативи) допомагають аналізувати поведінку юзерів і виявити потенційно проблемні місця в роботі апки. Ділюся з вами.

🔹Кількісний аналіз
Підходить для роботи з великою кількістю даних. З аналітикою виявите тенденції та шаблони поведінки користувачів у застосунку.

• Інструменти: Amplitude, Google Analytics for Mobile, Mixpanel, Firebase

🔹Юзабіліті тестування
Побачите в дії, як юзери користуються застосунком й вийдете на потенційні проблеми з дизайном

• Інструменти: Maze, UserTesting, Lookback, UXCam

🔹Опитування
Дізнаєтеся, як користувачі сприймають застосунок загалом або нові функції, які у них виникають потреби та проблеми.

• Інструменти: Monkey Survey, Typeform, Google Forms, JotForm

#гостьова_середа

Дизайн — всюди. І в деталях теж.

Ділимося ресурсами, з якими естетично доповните інтерфейси.

• Анімовані лоадери.

• Градієнти.

• SVG форми.

А на Mobile UI Design Workshop навчитеся працювати з UI та його елементами, щоб дизайни були не лише зручними, а й візуально привабливими.

Друзі, у нас є запитання. А у вас — відповідь.

Який контент хочете бачити у цьому каналі? Сміливо накидуйте у коментарі, про що вам буде цікаво почитати, які теми нам варто розкрити.

Ми вже сидимо тут з розгорнутим нотатником ✍️

А в X, у кращому минулому твіттері, справи з дизайном — цікаві.

Ось, наприклад, що буде, якщо скоротити дизайнерів. І копірайтерів, схоже, теж.

Якісні українські шрифти — те, що з радістю шеримо з вами й закликаємо плекати.

Ловіть добірку тих, з якими можуть промовляти ваші проєкти.

🔹Текстові

• Otoiwo Grotesk Олега Ліщука. У шрифтовій сімʼї є по два накреслення з відкритою ліценцією.
• Zerno Олега Ліщука. Два стилі є з відкритою ліцензією.
• Mars Type Pro Євгена Садко. Тут у нас повна гарнітура.

🔹Для малих текстів і заголовків

• Grunt Grotesk Валентина Ткаченка. Накреслення light та bold мають відкриту ліцензію.
• Murs Максима Кобузана. Накреслення Wide Dark — безоплатне.
• Marevo Анастасії Шишенок, Кирила Ткачова. Щоб придбати шрифт потрібно написати в директ.

🔹Акцидентні

• Decutto Михайла Рафайлика. Тут платні накреслення.
• Palitura Михайла Рафайлика. Тут також платні накреслення.
• BraveStone Кирила Ткачова, Сергія Макаренка. Щоб придбати шрифт, потрібно написати в директ.

Глянути на інтерфейс очима користувачів

Або як протестувати, що юзери зможуть без проблем користуватися складною та/чи системою з новим функціоналом?

Відповідь — cognitive walkthrough.

Суть методу — оцінити юзабіліті та learnability інтерфейсу на основі завдань.

Це як юзер тестування, але проводиться без користувачів. Натомість усе відбувається у форматі воркшопу, де участь можуть брати UX-фахівці, власники продуктів, розробники, експерти сфери.

Вони проходять кожен етап флоу і відповідають на 4 запитання, щоб виявити частини інтерфейсу, з якими у нових користувачів можуть виникнути труднощі:

🔹Чи спробують користувачі досягти правильного результату? Тобто, чи зрозуміють вони, що дія на даному етапі потрібна для досягнення їхньої загальної мети?

🔹Чи зможуть користувачі легко знайти інтерактивний елемент, який виконує дію?

🔹Чи асоціюватимуть користувачі правильну дію з цільовим результатом? Наприклад, правильна кнопка є видимою, але чи зрозуміють юзери її позначення і, чи будуть вони знати, як з нею взаємодіяти?

🔹Залежно від того, що відбувається після виконання дії, чи знатимуть користувачі, що вона була правильною та допомогла їм досягти  загальної мети?

• Більше про метод, як він відрізняється від евристичного аналізу та його приклад — у статті.