building sexy user interfaces in servoy
DESCRIPTION
This video demonstrates how to revamp an existing Servoy Smart Client screen with Centigrade's business Look & Feel BizLaf using Servoy Developer.TRANSCRIPT
![Page 1: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/1.jpg)
0Servoy World 2011
Building Sexy User Interfaces in ServoyServoy World 2011
Thomas Immich
![Page 2: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/2.jpg)
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
![Page 3: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/3.jpg)
3
BACKGROUND INFORMATION
![Page 4: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/4.jpg)
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
![Page 5: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/5.jpg)
Servoy World 2011
SELECTED CLIENTS
Clients from different industries and countries:USA, Netherlands, Belgium, Spain, Austria, Switzerland, Germany
![Page 6: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/6.jpg)
The impact of a well-designed user interface
6
INTRODUCTION
![Page 7: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/7.jpg)
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?”
![Page 8: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/8.jpg)
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
![Page 9: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/9.jpg)
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
![Page 10: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/10.jpg)
Servoy World 2011
THE RELEVANCE OF USER INTERFACE DESIGN
• Disciplines that pave the way for this:
• Usability Engineering
• Visual UI Design
• UI Development
![Page 11: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/11.jpg)
Attributes that make up a great UI
11
INTUITIVE, SEXY AND CLEAN
![Page 12: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/12.jpg)
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”
![Page 13: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/13.jpg)
13INTUITIVE?
![Page 14: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/14.jpg)
14INTUITIVE?
![Page 15: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/15.jpg)
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)
![Page 16: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/16.jpg)
Servoy World 2011
USER-CENTERED DESIGN PROCESS
Think user-centric, involve users
![Page 17: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/17.jpg)
Servoy World 2011
LOW-FI PROTOTYPES (WIREFRAMES & SCRIBBLES) 18
![Page 18: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/18.jpg)
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
![Page 19: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/19.jpg)
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
![Page 20: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/20.jpg)
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
![Page 21: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/21.jpg)
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
![Page 22: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/22.jpg)
Servoy World 2011
FROM A WIREFRAME… 24
![Page 23: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/23.jpg)
Servoy World 2011
…TO A HIGH-FIDELITY MOCK 26
![Page 24: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/24.jpg)
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
![Page 25: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/25.jpg)
Servoy World 2011
IS THIS A SEXY DASHBOARD?
![Page 26: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/26.jpg)
Servoy World 2011
IS THIS A SEXY INVOICING SCREEN?
![Page 27: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/27.jpg)
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.
![Page 28: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/28.jpg)
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
![Page 29: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/29.jpg)
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
![Page 30: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/30.jpg)
Servoy World 2011
IS THIS A SEXY INVOICING SCREEN?
![Page 31: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/31.jpg)
Screen Design and Icon Design
35
GOOD AND BAD PRACTICES
![Page 32: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/32.jpg)
Servoy World 2011
BAD
![Page 33: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/33.jpg)
Servoy World 2011
GOOD
![Page 34: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/34.jpg)
Servoy World 2011
BAD
• This sample does not reflect dependencies between controls.
![Page 35: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/35.jpg)
Servoy World 2011
GOOD
![Page 36: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/36.jpg)
Servoy World 2011
ONE STYLE PER COMPONENT CLASS…
![Page 37: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/37.jpg)
Servoy World 2011
…VS. ONE STYLE PER USAGE CONTEXT
![Page 38: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/38.jpg)
Servoy World 2011
COMPLEXITY…
![Page 39: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/39.jpg)
Servoy World 2011
…REDUCED
![Page 40: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/40.jpg)
Servoy World 2011
DOES THIS WELCOME SCREEN WELCOME YOU?
![Page 41: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/41.jpg)
Servoy World 2011
DOES THIS WELCOME SCREEN WELCOME YOU?
![Page 42: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/42.jpg)
Servoy World 2011
THIS IS NOT AN ICON…
![Page 43: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/43.jpg)
Servoy World 2011
BUT THIS ONE IS…
![Page 44: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/44.jpg)
Servoy World 2011
…AND SO ARE THESE
![Page 45: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/45.jpg)
Servoy World 2011
WHY ARE THESE ICONS RECOGNIZABLE AT 16X16 PIXEL?
![Page 46: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/46.jpg)
Servoy World 2011
COHERENT, BUT…
![Page 47: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/47.jpg)
Servoy World 2011
STILL COHERENT, BUT MUCH MORE APPEALING
![Page 48: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/48.jpg)
Servoy World 2011
A DEFINITELY UNSEXY SPLASHSCREEN…
![Page 49: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/49.jpg)
Servoy World 2011
…PUT IN ANOTHER DRESS
![Page 50: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/50.jpg)
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
![Page 51: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/51.jpg)
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
![Page 52: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/52.jpg)
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
![Page 53: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/53.jpg)
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
![Page 54: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/54.jpg)
Servoy World 2011
USING 9-SLICE-SCALING
![Page 55: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/55.jpg)
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
![Page 56: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/56.jpg)
68
“Fine. But… so what?”
![Page 57: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/57.jpg)
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:
![Page 58: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/58.jpg)
81
LIVE DEMO
![Page 59: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/59.jpg)
82
OR watch on YouTube:http://www.youtube.com/watch?v=NFtSJ60B2QY
![Page 60: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/60.jpg)
Servoy World 2011
FROM STANDARD…
![Page 61: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/61.jpg)
Servoy World 2011
…OVER BIZLAF UNTAGGED…
![Page 62: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/62.jpg)
Servoy World 2011
…TO BIZLAF WITH ADDITIONAL STYLES
![Page 63: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/63.jpg)
86
QUESTIONS
![Page 64: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/64.jpg)
87
![Page 65: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/65.jpg)
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
![Page 66: Building Sexy User Interfaces in Servoy](https://reader034.vdocument.in/reader034/viewer/2022052621/55840d94d8b42a34708b4578/html5/thumbnails/66.jpg)
Servoy World 2011
MORE ABOUT THE SPEAKER
• Follow me on Twitterhttp://www.twitter.com/thomasimmich
• Contact [email protected]