Building Sexy User Interfaces in Servoy

4,955 views

Published on

This video demonstrates how to revamp an existing Servoy Smart Client screen with Centigrade's business Look & Feel BizLaf using Servoy Developer.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,955
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
39
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building Sexy User Interfaces in Servoy

  1. 1. Servoy World 2011 Building Sexy User Interfaces in Servoy Thomas ImmichServoy World 2011 0
  2. 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 DemoServoy World 2011
  3. 3. 3BACKGROUND INFORMATION
  4. 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 CentigradeServoy World 2011
  5. 5. SELECTED CLIENTS Clients from different industries and countries: USA, Netherlands, Belgium, Spain, Austria, Switzerland, GermanyServoy World 2011
  6. 6. 6INTRODUCTIONThe impact of a well-designed user interface
  7. 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. 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 perceivedServoy World 2011
  9. 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 TolerantServoy World 2011
  10. 10. THE RELEVANCE OF USER INTERFACE DESIGN • Disciplines that pave the way for this: • Usability Engineering • Visual UI Design • UI DevelopmentServoy World 2011
  11. 11. 11INTUITIVE, SEXY AND CLEANAttributes that make up a great UI
  12. 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
  13. 13. INTUITIVE? 13
  14. 14. INTUITIVE? 14
  15. 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
  16. 16. USER-CENTERED DESIGN PROCESS Think user-centric, involve usersServoy World 2011
  17. 17. LOW-FI PROTOTYPES (WIREFRAMES & SCRIBBLES) 18Servoy World 2011
  18. 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 applicationServoy World 2011
  19. 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 mostServoy World 2011
  20. 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” themServoy World 2011
  21. 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 orientationServoy World 2011
  22. 22. FROM A WIREFRAME… 24Servoy World 2011
  23. 23. …TO A HIGH-FIDELITY MOCK 26Servoy World 2011
  24. 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 DesirabilityServoy World 2011
  25. 25. IS THIS A SEXY DASHBOARD?Servoy World 2011
  26. 26. IS THIS A SEXY INVOICING SCREEN?Servoy World 2011
  27. 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. 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 limitationsServoy World 2011
  29. 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 ThroughputServoy World 2011
  30. 30. IS THIS A SEXY INVOICING SCREEN?Servoy World 2011
  31. 31. 35GOOD AND BAD PRACTICESScreen Design and Icon Design
  32. 32. BADServoy World 2011
  33. 33. GOODServoy World 2011
  34. 34. BAD • This sample does not reflect dependencies between controls.Servoy World 2011
  35. 35. GOODServoy World 2011
  36. 36. ONE STYLE PER COMPONENT CLASS…Servoy World 2011
  37. 37. …VS. ONE STYLE PER USAGE CONTEXTServoy World 2011
  38. 38. COMPLEXITY…Servoy World 2011
  39. 39. …REDUCEDServoy World 2011
  40. 40. DOES THIS WELCOME SCREEN WELCOME YOU?Servoy World 2011
  41. 41. DOES THIS WELCOME SCREEN WELCOME YOU?Servoy World 2011
  42. 42. THIS IS NOT AN ICON…Servoy World 2011
  43. 43. BUT THIS ONE IS…Servoy World 2011
  44. 44. …AND SO ARE THESEServoy World 2011
  45. 45. WHY ARE THESE ICONS RECOGNIZABLE AT 16X16 PIXEL?Servoy World 2011
  46. 46. COHERENT, BUT…Servoy World 2011
  47. 47. STILL COHERENT, BUT MUCH MORE APPEALINGServoy World 2011
  48. 48. A DEFINITELY UNSEXY SPLASHSCREEN…Servoy World 2011
  49. 49. …PUT IN ANOTHER DRESSServoy World 2011
  50. 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 elementsServoy World 2011
  51. 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 approachesServoy World 2011
  52. 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: PhotoshopServoy World 2011
  53. 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-ScalingServoy World 2011
  54. 54. USING 9-SLICE-SCALINGServoy World 2011
  55. 55. 9-SLICE-SCALING METHOD • Allows to resize a GUI element without any loss of quality • This method works in Java Swing and CSS3Servoy World 2011
  56. 56. 68“Fine. But… so what?”
  57. 57. READY-MADE SOLUTION • We are happy to announce that for the Servoy Smart Client all this is now available out of the box:Servoy World 2011
  58. 58. 81LIVE DEMO
  59. 59. 82OR watch on YouTube:http://www.youtube.com/watch?v=NFtSJ60B2QY
  60. 60. FROM STANDARD…Servoy World 2011
  61. 61. …OVER BIZLAF UNTAGGED…Servoy World 2011
  62. 62. …TO BIZLAF WITH ADDITIONAL STYLESServoy World 2011
  63. 63. 86QUESTIONS
  64. 64. 87
  65. 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/iconbookServoy World 2011
  66. 66. MORE ABOUT THE SPEAKER • Follow me on Twitter http://www.twitter.com/thomasimmich • Contact me thomas.immich@centigrade.deServoy World 2011

×