JS meetup of Open Tech Week by Sigma Software, Lviv 2019

1. Чим простіше – тим краще
Станіслав Хорунжий

2. Про мене
• Senior Front-End Engineer у компанії
Sigma Software
• Я є драйвером JavaScript community у
компанії
• Останній рік я працюю на стартапах з
VueJS
• Вважаю що на кожному успішному
проекті повинні бути Git хуки, TypeScript,
гарний Linter, Unit тести та Lodash

3. Замовлення таксі раніше
1. Дзвонимо у службу таксі
2. Дізнаємося своє місце знаходження
3. Називаємо своє місце знаходження оператору
4. Називаємо адресу призначення
5. Чекаємо…
6. Дізнаемося сумму
7. Чекаємо на зворотній виклик по приїзду машини
8. Уважно слухаємо номер, марку і колір машини
9. Добираємося до адреси призначення
10. Платимо водієві гроші за таксі

4. Замовлення таксі зараз
Одноразова операція:
• Вибір міста (іноді автоматично)
• Введення даних кредитної карти
• Введення імені користувача (інколи реєстрація аккаунта)
1. Відкриваємо додаток
2. Вказуємо адресу призначення
3. Натискаємо кнопку
4. Чекаємо коли буде знайдена машина
5. Виходимо після нотифікації
6. Добираємося до адреси призначення

5. Люди звикають до простоти

6. Замовлення таксі зараз
1. Відкриваємо додаток
2. Вказуємо адресу призначення
3. Натискаємо кнопку
4. Чекаємо коли буде знайдена машина
5. Виходимо після нотифікації
6. Добираємося до адреси призначення

7. Замовлення таксі зараз
1. Відкриваємо додаток
2. Вказати своё місце знаходження (у випадку проблем с GPS)
3. Вказуємо адресу призначення
4. Натискаємо кнопку
5. Чекаємо коли буде знайдена машина
6. Виходимо після нотифікації
7. Добираємося до адреси призначення

10. Я звикаю до простоти

11. Еволюція технологій

12. Еволюція технологій
≠
Простий інтерфейс

18. Чому ж користувачі хочуть
витрачати свій час
на навчання?

19. Види додатків
Право вибору за користувачем
Відеоігри
Новинні, розважальні та інші сайти
Браузери
Плеєри (відео, аудіо)
Право выбору за суспільством
Мессенджери
Онлайн-банкінг, онлайн підтримка та т.п.
Web-монополії (Facebook, Instagram, Twitter,
Google, Youtube, Booking, Monobank)
Професійний софт
1С чи будь-яка інша онлайн бухгалтерія
Трекери часу
CRM системи
Професійний day-to-day софт (Slack, Outlook, Excel)
За правом вибору

20. Чому ж користувачі хочуть
витрачати свій час
на навчання?

21. Види додатків
Право вибору за користувачем
Відеоігри
Новинні, розважальні та інші сайти
Браузери
Плеєри (відео, аудіо)
Право выбору за суспільством
Мессенджери
Онлайн-банкінг, онлайн підтримка та т.п.
Web-монополії (Facebook, Instagram, Twitter,
Google, Youtube, Booking, Monobank)
Професійний софт
1С чи будь-яка інша онлайн бухгалтерія
Трекери часу
CRM системи
Професійний day-to-day софт (Slack, Outlook, Excel)
За правом вибору

22. Види додатків
Право вибору за користувачем
Відеоігри
Новинні, розважальні та інші сайти
Браузери
Плеєри (відео, аудіо)
Право выбору за суспільством
Мессенджери
Онлайн-банкінг, онлайн підтримка та т.п.
Web-монополії (Facebook, Instagram, Twitter,
Google, Youtube, Booking, Monobank)
Професійний софт
1С чи будь-яка інша онлайн бухгалтерія
Трекери часу
CRM системи
Професійний day-to-day софт (Slack, Outlook, Excel)
За правом вибору

23. Створення простоти там,
де все здається дуже
складним

24. Створення простого та
зрозумілого інтерфейсу

25. Хто за це відповідає?

26. Дизайнер
vs
Девелопер

28. Designer
Developer

29. Обов'язки
Дизайнер:
- UI для усіх сторінок вашого додатку
- Колірна схема, гармонія кольорів,
контрастність
- Гарні UX практики
- Надає вам усі необхідні ассети

30. Обов'язки
Девелопер:
- Пише код

31. Обов'язки
Девелопер:
- Пише код
- Перевіряє відповідність верстки дизайну
- Кросбраузерність
- Багатоплатформність

32. Обов'язки
Девелопер:
- Пише код
- Перевіряє відповідність верстки дизайну
- Кросбраузерність
- Багатоплатформність
- Знае те, про що мовчать дизайнера

33. Про що мовчать дизайнера?
1. Коли нам потрібно дізейблити контроли, та чи треба
взагалі?
2. Що повинно відбуватися поки інформація
завантажується?
3. Що повинно відбуватися поки інформація зберігається?
4. Як виглядають невалідні поля і помилки?
5. Що робити якщо в таблиці занадто багато записів?
6. А що якщо текст буде довшим ніж ширина елемента?

34. Дизайнер завжди відображає
ідеальний кейс

35. Погані UX практики

36. Погані UX практики
Ніколи так не роби

37. NO!
Не показуй fullscreen лоадер, який
пропадає через 1-2 секунди

38. NO!
Не зловживай тултипами, пам’ятай про
mobile

39. NO!
Не проводь валідацію тільки на бекенді,
навіть якщо вона дуже складна. Створюй
інтерактивні форми.

40. Гарні UX практики

41. Гарні UX практики
Завжди так роби

42. YES!
Завжди проводь валідацію форм та
показуй зрозумілі повідомлення про
помилки

43. YES!
Показуй лоадери під час завантаження
інформації, завжди і усюди

45. YES!
Не забувай дізейблити кнопку після кліку
та показуй лодер всередині кнопки:
<button @click="saveChanges()"
:disabled="isLoading">
<v-icon v-if="isLoading" icon="loader"></v-icon>
Save changes
</button>

46. YES!
Ніколи не треба дізейблити кнопку Cancel
у модальних вікнах.
Додай кнопку Cancel.
Або хоча б хрестик.
Будь ласка…

47. YES!
Для больших таблиц и списков используй
Virtual Scrolling

49. YES!
Додай можливість скасування останньої
дії (Undo), ящко це техн

50. YES!
Виділяй час на оптимізацію первинної
загрузки сторінки, особливо якщо у вас
є підтримка mobile
In 2018, 58% of site visits were from mobile
devices.©
Eric Enge, Stone Temple

51. Оптимізація загрузки
1. Lighthouse
2. webpack-bundle-analyzer

52. Lighthouse

53. webpack-bundle-analyzer

54. Будьте гарними
Front-End розробниками

55. Створюйте прості
та зручні інтерфейси

56. Питання?