Download to read offline
Uploaded bySergei Martens
DOAG 10 UI commendments for APEX developers
This document contains 10 UI/UX commandments for Apex developers presented by Sergei Martens. It discusses creating the right mindset by focusing on the user experience, using reports and hierarchies instead of tables when possible, choosing graphics, colors and fonts carefully in dashboards and interfaces, following accessibility guidelines, and continuing to improve existing features before adding new ones. The document provides definitions of user interface and user experience design and examples to illustrate the guidelines.
DOAG 10 UI commendments for APEX developers
- 1. Everything for Apex DOAG November 2015 Ten UI/ UX commandments For Apex developers
- 2. 30-10-18 2Everything forApex •Oracle developer since 1998 •Started as classic developer, now Apex •Special interest in UI / UX •Bootstrap theme for Apex Who is Sergei Martens (11-3- 1975)What’s his story?
- 3. New market, new lables Smart4Unitymembers 30-10-18 3Everything for Apex Coöperating Oracle Apex Professional s Marketing and Branding Software Products ICT Training, Courses and Education
- 4. Curriculum 2013 Gbilling; Google Apps application 30-10-184Everything for Apex
- 5.
- 6. Curriculum 2015 MyEdplan; Santa Monica Collega 30-10-186Everything for Apex
- 7. Save harbor statement I ama nice guy, I think… The following sheets are intended to outline my general thoughts about UI&UX. Some of the statements can feel as confrontational. Of course, things will be more nuanced in the real world. I intentionally did this to create a clearer 30-10-18 7Everything for Apex
- 8. UI & UX Somedefinitions User interface (UI) The user interface is everything designed into an information device with which a human being may interact -- including display screen, keyboard, mouse, the appearance of a desktop, illuminated characters, help messages, and how an application invites interaction and responds to it. 30-10-18 8Everything for Apex
- 9. UI & UX Somedefinitions User experience (UX) According to a study from the Oxford Journal Interacting With Computers, the goal of UX design is to “improve customer satisfaction and loyalty through the utility, ease of use, and pleasure provided in the interaction with a product.” In other words, UX design is the process of designing 30-10-18 9Everything for Apex
- 10. Why UI should matterto you Some thoughts Because…. 30-10-18 10Everything for Apex •More productivity •Technology involves our day to day life (competition) •Try minimize health risk •Help senior users •Overcoming shallow reading •There is no universal UI for all (business) tasks
- 11. Trend in UI/UX UI/UXhas been changing over time 30-10-18 11Everything for Apex •Bootstrap •Simple design •A lot of white space •Large items •Dynamic regions •Info graphics •Dashboard •Long pages •Flat design / Metro •Transitions •JQuery mobile •Complex design •Less white •Small items •Tabs / Report -> Detail •Text •Reports / Tables •Short pages •Skeuomorphic (realism) HOT NOT
- 12. The first commandment Create theright mindset 30-10-18 12Everything for Apex The User is always “You are not the user. Neither is your Boss.”
- 13. The first commandment Create theright mindset 30-10-18 13Everything for Apex user interface logic data user interface MAGIC Your program How users see it
- 14. The second commandment The realworld is not a relational database 30-10-18 14Everything for Apex Use Reports only when necessary “Table data has no hierarchy”
- 15. The second commandment The realworld is not a relational database 30-10-18 15Everything for Apex user interface logic data How you see it How you should see it user interface logic data
- 16. The second commandment The realworld is not a relational database 30-10-18 16Everything for Apex EMPLOYEE NO FIRST NAME LAST NAME SALARY COMMISSION DEPARTMENT NO ----------- ----------- ------------- ------- ---------- ------------- 100 Steven King 24000 90 101 Neena Kochhar 17000 90 102 Lex De Haan 1700 90 103 Alexander Hunold 9000 60 107 Diana Lorentz 4200 60 149 Eleni Zlotkey 10500 20% 80 174 Ellen Abel 11000 30% 80 178 Kimberely Grant 7000 15%
- 17. The second commandment The realworld is not a relational database 30-10-18 17Everything for Apex Mr. King (Steven) – 100 Salary: 24.000, No commission Ms. Kochar(Nena) – 101 Salary: 17.000, No commission Mr. De Haan(Lex) – 102 Salary: 1.700, No commission Ms. Abel(Ellen) – 174 Salary: 11.000, 30% commission
- 18. The third commandment Understanding a dashboard 30-10-1818Everything for Apex Choose your graphics with care
- 19. The third commandment Creating aneffective dashboard 30-10-18 19Everything for Apex Less is more Choose colors with care No more gauges Start at zero
- 20. The third commandment Creating aneffective dashboard 30-10-18 20Everything for Apex Show the difference No more pies Highlight what’s important Another angle
- 21. The fourth commandment Avoid annoyance 30-10-1821Everything for Apex Wait time maximized to 2 sec “More wait time will disturb the UX”
- 22. The fifth commandment Choose theright colors 30-10-18 22Everything for Apex •Every colour has a psychological meaning •Think about contrast (e.g. http://contrastchecker.com/) •Think about colour blind users; Green & Red - Green & Brown - Blue & Purple - Green & Blue; Light Green & Yellow - Blue & Grey - Green & Grey Green & Black •Not only used for visual harmony, but also for hierarchy
- 23. The fifth commandment Choose theright colors 30-10-18 23Everything for Apex Meaning Caution Love, passion, heat, joy, power, failure Change, warmth, healthy, sociable, earthy Happy, joy, cheerful, optimistic, positive Nature, growth, stable, harmony, money Calm, loyal, conservative, intelligence Wisdom, spiritual, royalty, creativity Independence, sophisticated, neutral, modern Neutral, clam, innocence, inviting, clean Conservative, serious, mysterious, sophisticated Earthy, wholesome, simple, friendly Has negative connotations in some cultures Difficult to project or see on monitors Avoid using with reds and browns Can appear fuzzy next to or on top of black Can be perceived as too exotic for business May be perceived as non-committal Can convey sterile, stark or cheap Can be difficult to see if overused May be perceived as too casual Red Orange Yellow Green Blue Purple Grey White Black Brown
- 24. The fifth commandment Choose theright colours 30-10-18 24Everything for Apex Google style guide: •Choose one 500 colour as a primary colour •Choose two other colours from the same (primary) pallet •Choose a secondary colour; •Choose two colours of the secondary pallet “https://www.google.com/design/spe c/style/color.html#color-color- palette”
- 25. The sixth commandment Do notre-invent the wheel 30-10-18 25Everything for Apex Get familiar with popular frameworks & design patterns. Start working on plugins •Example applications https://apex.oracle.com/en/ •Apex pluginshttp://www.apex-plugin.com/ https://apex.world/ords/f?p=100:700 •Bootstrap http://getbootstrap.com/ •JQuery UI https://jqueryui.com/ •Oracle Alta UI http://www.oracle.com/webfolder/ux/middleware/alta •Foundation http://foundation.zurb.com/ •ExtJs https://www.sencha.com/
- 26. The seventh commandment Accessibility 30-10-18 26Everythingfor Apex Watch out for Accessibility issues
- 27. The seventh commandment Accessibility 30-10-18 27Everythingfor Apex •Apex out-of-the-box does a great job •A lot of plug-ins have accessibility issues •Do not use colours alone for displaying information •All action items must be keyboard navigable •Focus indicator •Watch out for focus “dropping on the floor” (popups, modals, etc.) •Screen reader compatible (aria & role attributes) •Test your application
- 28. The eight commandment What isimportant and what is not 30-10-18 28Everything for Apex Important info needs a Clearance
- 29. The ninth commandment Fonts 30-10-18 29Everythingfor Apex Choose the right font
- 30. The ninth commandment Fonts 30-10-18 30Everythingfor Apex Google has some really nice free fonts https://www.google.com/fonts
- 31. The ninth commandment Fonts 30-10-18 31Everythingfor Apex •Different font sizes & styles for different information •Maximum 12 words per line •Bigger fonts need (relative) higher line height
- 32. The tenth commandment Feedback button 30-10-1832Everything for Apex Make old features work better before adding new features