building sexy user interfaces in servoy
Post on 19-Jun-2015
4.244 Views
Preview:
DESCRIPTION
TRANSCRIPT
0Servoy World 2011
Building Sexy User Interfaces in ServoyServoy World 2011
Thomas Immich
Servoy World 2011
AGENDA
• Background Information
• IntroductionThe impact of a well-designed user interface
• Intuitive, sexy and cleanAttributes that make up a great UI
• Good and bad practicesScreen design and icon design samples
• Live Demo
3
BACKGROUND INFORMATION
Servoy World 2011
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
SELECTED CLIENTS
Clients from different industries and countries:USA, Netherlands, Belgium, Spain, Austria, Switzerland, Germany
The impact of a well-designed user interface
6
INTRODUCTION
Servoy World 2011
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
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
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
THE RELEVANCE OF USER INTERFACE DESIGN
• Disciplines that pave the way for this:
• Usability Engineering
• Visual UI Design
• UI Development
Attributes that make up a great UI
11
INTUITIVE, SEXY AND CLEAN
Servoy World 2011
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”
13INTUITIVE?
14INTUITIVE?
Servoy World 2011
USABILITY ENGINEERING
• Discipline stemming from psychology(e.g. cognitive psychology)
• Solving the right problems(by understanding users’ needs and context)
• Conceptualizing the fundamental information designand interaction design
• Validating that design decisions really work (by evaluating them with real users)
Servoy World 2011
USER-CENTERED DESIGN PROCESS
Think user-centric, involve users
Servoy World 2011
LOW-FI PROTOTYPES (WIREFRAMES & SCRIBBLES) 18
Servoy World 2011
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
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
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
VISUAL UI DESIGN CARES ABOUT…
• Screen (fine) layoutDistances, proportions, dimensions, alignment
• GUI element stylesAffordance, clarity, colors, fonts etc.
• IconsIntuitive, easily recognizable and aesthetic imagery to rapidly communicate application functionality
• AnimationsTransitions between different GUI states that improve orientation
Servoy World 2011
FROM A WIREFRAME… 24
Servoy World 2011
…TO A HIGH-FIDELITY MOCK 26
Servoy World 2011
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
IS THIS A SEXY DASHBOARD?
Servoy World 2011
IS THIS A SEXY INVOICING SCREEN?
Servoy World 2011
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
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
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
IS THIS A SEXY INVOICING SCREEN?
Screen Design and Icon Design
35
GOOD AND BAD PRACTICES
Servoy World 2011
BAD
Servoy World 2011
GOOD
Servoy World 2011
BAD
• This sample does not reflect dependencies between controls.
Servoy World 2011
GOOD
Servoy World 2011
ONE STYLE PER COMPONENT CLASS…
Servoy World 2011
…VS. ONE STYLE PER USAGE CONTEXT
Servoy World 2011
COMPLEXITY…
Servoy World 2011
…REDUCED
Servoy World 2011
DOES THIS WELCOME SCREEN WELCOME YOU?
Servoy World 2011
DOES THIS WELCOME SCREEN WELCOME YOU?
Servoy World 2011
THIS IS NOT AN ICON…
Servoy World 2011
BUT THIS ONE IS…
Servoy World 2011
…AND SO ARE THESE
Servoy World 2011
WHY ARE THESE ICONS RECOGNIZABLE AT 16X16 PIXEL?
Servoy World 2011
COHERENT, BUT…
Servoy World 2011
STILL COHERENT, BUT MUCH MORE APPEALING
Servoy World 2011
A DEFINITELY UNSEXY SPLASHSCREEN…
Servoy World 2011
…PUT IN ANOTHER DRESS
Servoy World 2011
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
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
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
NORMAL SCALING VS. 9-SLICE-SCALING
• Problem: Pixel-graphics cannot be scaled arbitrarily without suffering from quality issues
Scaling of a buttonwithout 9-Slice-Scaling
Scaling of a buttonwith 9-Slice-Scaling
Servoy World 2011
USING 9-SLICE-SCALING
Servoy World 2011
9-SLICE-SCALING METHOD
• Allows to resize a GUI element without any loss of quality
• This method works in Java Swing and CSS3
68
“Fine. But… so what?”
Servoy World 2011
READY-MADE SOLUTION
• We are happy to announce that for the Servoy Smart Client all this is now available out of the box:
81
LIVE DEMO
82
OR watch on YouTube:http://www.youtube.com/watch?v=NFtSJ60B2QY
Servoy World 2011
FROM STANDARD…
Servoy World 2011
…OVER BIZLAF UNTAGGED…
Servoy World 2011
…TO BIZLAF WITH ADDITIONAL STYLES
86
QUESTIONS
87
Servoy World 2011
MORE ABOUT CENTIGRADE
• Articles on UI design topics and UI design inspirationhttp://www.centigrade.de/bloghttp://www.centigrade.de/gallery
• More about BizLafhttp://www.centigrade.de/bizlaf
• Browse stock icons with Icon Bookhttp://www.centigrade.de/iconbook
Servoy World 2011
MORE ABOUT THE SPEAKER
• Follow me on Twitterhttp://www.twitter.com/thomasimmich
• Contact methomas.immich@centigrade.de
top related