1 What we’ll discuss today 2 ● Intro ● UX & UI in RH ● Course requirements VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ ● Communication channels ● Teamwork - final project ● Why do we teach ● What is UX Ahoj! VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ 3 Karel Hala Engineering Manager Working on Cloud based projects. Lego enthusiastic. khala@redhat.com Mária Šviriková Interaction Designer Working on cloud based open source projects. msviriko@redhat.com 378881@muni.cz Filip Hlaváč Frontend Developer Working on Cloud based projects. Love hiking and board games. fhlavac@redhat.com Jan Vrzal Product Designer Working on DQ solutions. vrzal.ja@gmail.com 4 Introduce yourself VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ Activity 5 VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ Red Hat ● Open source technologies for enterprise ● Headquarters in Raleigh North Carolina ● Acquired by IBM in 2018 ● Operating as a separate business unit ● Globally employs 13400 people ● Red Hat Czech in Brno - 1400 people ● Open leadership 6 Multiple web UIs - and multiple teams Multiple frameworks Custom component library - Patternfly Red Hat UI VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ 7 Interaction design Visual design User research UX content design Front-end development Red Hat User Experience VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ 13 Red Hat offices 8 Countries 141 UXDers 8 Ataccama ● Ataccama is a global software company delivering a unified platform for automated data quality, MDM, and metadata management—Ataccama ONE. ● Headquartered in Toronto, we’re in 10 cities around the world, the largest, R&D office is in Prague. ● 500+ of us (and counting) from 22+ countries and 6 continents VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ 9 BEST CLASS EVER Intuitive development and user experience 10 Cíle předmětu Cíl tohoto předmětu je představení User Experience (UX) Designu a Front-end technologií s hands-on experience na projektu s reálnými daty. Tento předmět představí základy user-centered designu a provede studenty praktickými technikami, kde pochopíme potřeby našeho konečného uživatele. Tento předmět je určen pro začátečníky, kteří se chtějí dozvědět více o “user experience” nebo “user interface”. Student pochopí, proč je důležité přemýšlet o potřebách uživatele a pak se naučí daný intuitivní postup aplikovat na svém projektu. Budeme tvořit prototypy a potom na jejich základě implementovat projekt s využitím aktuálních technologií. Na projektu se bude průběžně iterovat a výstupy se budou testovat na uživatelích. Studenti budou provedeni správným postupem k vytvoření user-friendly uživatelského rozhraní. Osnova 11 1. Introduction 2. Intro to UX and design thinking AND UX research 1: User Needs 3. Javascript practices - old and new 4. Wireframing and prototyping 1 5. Wireframing and prototyping 2 6. React + Redux 7. UX feedback and Iterations (present your designs - 11. 11.) 8. Deployment, Charting and JWT 9. UX research 2: User testing 10. Micro Frontend 11. App testing 12. Presentations and Critique (16. 12.) *subject to flexible change VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ Communication tools 12 ➔ Gitlab https://gitlab.fi.muni.cz/qhala/dashboard-PV278 ➔ Slack (preferred) fi-muni-rejnoci.slack.com When you log in - say hi to #general Invite link - https://fi-muni-rejnoci.slack.com/join/signup ➔ Email khala@redhat.com msviriko@redhat.com fhlavac@redhat.com vrzal.ja@gmail.com VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ What you should have in your skillset after this class 13 ● UX tools such as research, prototyping & wireframing ● Ability to conduct your own user testing ● Processes to create better user experience ● Know how to write React app and components ● Data flows in JavaScript ● Basic understanding of build tools ● User testing how it works VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ Final project - UX 14 UX part ● Define a problem ● Personas ● Sketches and prototypes ● Usability testing feedback captured and incorporated VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ Final project - UI 15 UI part - 60 points ● Show overview of information and activities ● Visually showcase data trends and patterns ● Interact with data ● Display information about specific entity ● See user profile ● User login is mandatory - no need to update login screen ● Homeworks - 40 points ○ Download and run project - 6.10.2024 ○ Deploy application - 3.11.2024 ○ Navigation and user profile - 17.11.2024 ○ Chart/Table/interactive element - 1.12.2024 VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ Homework 1 16 ● Download and run project - https://gitlab.fi.muni.cz/qhala/dashboard-PV278 ● Record a short video and submit it to the IS homework vault ● Deadline 6.10.2024 VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ Final project variables 17 ● Population and Demography ● Internship for students ● Search for employment opportunities ● Voting system for citizen s a game ● Citizen portal VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ Teamwork is the dreamwork 18 VÝVOJ INTUITIVNÍCH UŽIVATELSKÝCH ROZHRANÍ CONFIDENTIAL designator V0000000 What is user experience? 19 20 Think about the last time you took a tram Photo by Alex Paganelli on Unsplash Activity 21 The process of creating end to end experience between user and a product/service/system UX Design The difference between UX and UI 23 24 25 26 27 28 29 30 Designing a product vs. Designing an experience 31 Activity Draw a bicycle 32 Activity Draw the most comfortable way how university student can get to the school in the winter. 33 Activity