PV168

GUI I

GUI

• Visual part of software
• Allows user to interact with computer
• Buttons, icons, menus VS text nased

Key elements

• Graphical elements - buttons, input fields, scrollbars
• Visual hierarchy - guiding the user
• Feedback mechanisms - confirmations, notifications

Why does PV168 begin with GUI?

• Top-down vs. bottom-up approach
• Top-down
  • Early value for users of the application
  • Fast convergence
• Bottom-up
  • Deep dive into technical details first
  • It takes long before we can show anything to users

GUI creation process

• It starts with a feature
• Functionality is specified with UI
• UI is specified by the functionality
• Wireframes

User Experience (UX) role

• Person responsible for look & feel
• Creative role
• Hard to do without talent
• Sometimes tied up too tight to product

UX vs. Developer

• Ideas can be too ambitious
• Developer wants to make it work
• UX wants to make it pleasant to use

Frontend - Backend - Full-stack

• Frontend
  • mostly JS, various frameworks, CSS
• Backend
  • business logic
• Full-stack
  • both together

Accessibility

• We never know who will use our application
• Text in pictures
• Contrast

A / B testing

• You probably participated and you didn’t even realize it
• Not really a testing
• UX utility

Dark Side of the UX

• Selling must be fast
• Ads placement
• Exclamation marks
• Red colors, danger

Patterns …

… and anti-patterns

Creating GUI for group project

• Use pen and paper
• Make sure the whole team is on the same page
• Keep it simple

Figma

Think of the platform !!!

• Desktop application
  • space, mouse vs touch
• Mobile application
  • screen size constraints
  • touch based
• Web interfaces
  • responsiveness
  • web standards HTML, CSS, Javascript

Inspiration

• Do not try to reinvent the wheel
• Look what works and what is popular

Interaction design

• User flow
• Personas and user journeys