This document summarizes a presentation about building sexy user interfaces in Servoy. The presentation covers the importance of user interface design, attributes of intuitive, sexy and clean interfaces, good and bad design practices with examples, and a live demo. It discusses topics like usability engineering, visual design, interaction design, and using techniques like 9-slice scaling to allow flexible resizing of interface elements.
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Building Sexy User Interfaces in Servoy
1. Servoy World 2011
Building Sexy User Interfaces in Servoy
Thomas Immich
Servoy World 2011
0
2. AGENDA
• Background Information
• Introduction
The impact of a well-designed user interface
• Intuitive, sexy and clean
Attributes that make up a great UI
• Good and bad practices
Screen design and icon design samples
• Live Demo
Servoy World 2011
4. ABOUT THE SPEAKER
Thomas Immich
• Design-developer hybrid
• Specializes in high-fidelity user interface
prototyping
• Lead design consultant at several large-scale
projects in agile development teams
• CEO and co-founder of Centigrade
Servoy World 2011
5. SELECTED CLIENTS
Clients from different industries and countries:
USA, Netherlands, Belgium, Spain, Austria,
Switzerland, Germany
Servoy World 2011
7. THE IMPACT OF A USER INTERFACE
• For the user, the user interface is the application
• Question is not only
“What can I accomplish with the software in theory?”
but also
“How good can I accomplish my goals in practice?”
Servoy World 2011
8. THE IMPACT OF A USER INTERFACE
• Feature tiredness
• What good is a feature that no one ever finds?
• How does the software stand out from the crowd when
competitors offer similar features?
• The user interface has the most significant impact on
how the software is perceived
Servoy World 2011
9. THE RELEVANCE OF USER INTERFACE DESIGN
• User Interface Design is about making user interfaces
effective, efficient and satisfying to use
• To memorize:
• Effective
• Efficient
• Easy to Learn
• Engaging
• Error Tolerant
Servoy World 2011
10. THE RELEVANCE OF USER INTERFACE DESIGN
• Disciplines that pave the way for this:
• Usability Engineering
• Visual UI Design
• UI Development
Servoy World 2011
12. INTUITIVE
• Intuition = Understanding without apparent effort
(just one of many definitions)
• Intuition is also about making fast decisions without
having to compare options
“Don’t make me think”
Servoy World 2011
15. USABILITY ENGINEERING
• Discipline stemming from psychology
(e.g. cognitive psychology)
• Solving the right problems
(by understanding users’ needs and context)
• Conceptualizing the fundamental information design
and interaction design
• Validating that design decisions really work (by
evaluating them with real users)
Servoy World 2011
18. MACRO VS. MICRO-INTERACTION DESIGN
• Macro-Interaction Design
• Defining what is needed where for users to solve their tasks
• Designing the flow and navigation through the application
Servoy World 2011
19. MACRO VS. MICRO-INTERACTION DESIGN
• Micro-Interaction Design
• Defining how a component behaves in detail
(mouse and keystroke level)
• Influences the application’s feel most
Servoy World 2011
20. VISUAL UI DESIGN
• Enhancing the application’s look
• No visual abstractions anymore – pixel preciseness
• Ideally, visual UI design builds on usability
engineering artifacts and “enriches” them
Servoy World 2011
21. VISUAL UI DESIGN CARES ABOUT…
• Screen (fine) layout
Distances, proportions, dimensions, alignment
• GUI element styles
Affordance, clarity, colors, fonts etc.
• Icons
Intuitive, easily recognizable and aesthetic imagery to rapidly
communicate application functionality
• Animations
Transitions between different GUI states that improve orientation
Servoy World 2011
24. WHAT IS SEXY ANYWAY?
• In this context, it’s definitely not about reproduction
• However, it is about attractiveness and appeal
• Again: intrinsic values can also be sexy
• If we talk of a UI being “sexy” we think of:
Aesthetics and Desirability
Servoy World 2011
26. IS THIS A SEXY INVOICING SCREEN?
Servoy World 2011
27. PUTTING „SEXY“ INTO CONTEXT
• Attractive things work better than unattractive things
and are perceived as being „more usable“
• Emotions can evoke the “I want to have it” effect
• The look and feel defines how a software is being
perceived
• Stable
• Professional
• Trustworthy
• etc.
Servoy World 2011
28. PUTTING „SEXY“ INTO CONTEXT
• Whatever shall be accomplished via visual design:
constraints must be considered
• Readability
• Support for the color vision impaired
• Standards compliance
• Cultural aspects (BiDi-support, color semantics etc.)
• Technical limitations
Servoy World 2011
29. CLEAN
• Everything’s in place
• Unnecessary stuff is kept out of sight
• Same things look the same and therefore are familiar
• If we talk of a UI being “clean” we think of:
Information Throughput
Servoy World 2011
30. IS THIS A SEXY INVOICING SCREEN?
Servoy World 2011
50. STYLISTIC DEVICES
• Modern user interfaces require certain stylistic devices
• Alphablending (for shadow and glow effects)
• Textures (for realistic material effects)
• Fluent transitions between different UI states (for better
orientation)
• Non-rectangular shaped UI elements
Servoy World 2011
51. DEFINING STYLES
• Basic colors and fonts should be defined descriptively
(just as known from HTML and CSS)
• However, pure descriptive mechanisms (still) have
limitations
• Alternative: image-based approaches
Servoy World 2011
52. MODERN VISUAL EFFECTS
• GUI elements are assembled from simple pixel-
graphics
• Advantages
• Modern effects can be used (almost) limitlessly
• High rendering performance
• Designers can work with the visual tool that they know
best: Photoshop
Servoy World 2011
53. NORMAL SCALING VS. 9-SLICE-SCALING
• Problem: Pixel-graphics cannot be scaled arbitrarily
without suffering from quality issues
Scaling of a button Scaling of a button
without 9-Slice-Scaling with 9-Slice-Scaling
Servoy World 2011
65. MORE ABOUT CENTIGRADE
• Articles on UI design topics and UI design inspiration
http://www.centigrade.de/blog
http://www.centigrade.de/gallery
• More about BizLaf
http://www.centigrade.de/bizlaf
• Browse stock icons with Icon Book
http://www.centigrade.de/iconbook
Servoy World 2011
66. MORE ABOUT THE SPEAKER
• Follow me on Twitter
http://www.twitter.com/thomasimmich
• Contact me
thomas.immich@centigrade.de
Servoy World 2011