Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UI/UX Tips & Tricks for developers

212 views

Published on

VIdeo recording at https://www.youtube.com/watch?v=QND4EQMTGeU
Details at https://aceu19.apachecon.com/session/uiux-tips-tricks-developers

UI/UX is a craft. The more you practice it, the better you are at it. Some people argue that you need to have 'good taste' in order to be a designer, to be the 'artsy type'. While this might be true for Graphic Design, Branding and Visual Arts in general, when it comes to Interface, Interaction and Product Design, the focus is more on practicality and 'common sense'.

I will present some general UI/UX tips & tricks that will help you design better. Everyone should know the basic principles and patterns of design, and once you understand them you will naturally integrate them in your work.

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download Full EPUB Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download Full doc Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download PDF EBOOK here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download EPUB Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download doc Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

UI/UX Tips & Tricks for developers

  1. 1. UI/UX @evalica Tips & Tricks for developers #APACHECON
  2. 2. UI Principles & Patterns 2 / 30 Patterns are describing recurring solutions that solve common design problems (ex. Breadcrumbs, Wizard, Undo, etc.) Principles are fundamental rules about the practice of design (ex. Consistency, Hierarchy, Contrast, etc.)
  3. 3. Consistency 3 / 30 p1# Similar objects should have similar meanings and functions Allow users to recognize usage patterns, decreasing the learning curve
  4. 4. Buttons: Primary / Secondary Actions 4 / 30 Secondary action Primary action Equal visual weight No hierarchy Have only one primary action per screen 1#
  5. 5. Buttons: Verbs as Actions 5 / 30 Avoid generic ‘OK’ or ‘Yes’ Avoid confusing phrases (like double negatives) Use explicit verbs Make it the obvious choice Can take the action without reading 2#
  6. 6. Buttons Placement: Modal Layout 6 / 30 Left aligned Right aligned Vertical scanning Faster Z-shaped flow 3#
  7. 7. Buttons Placement: Full Page Layout 7 / 30 Left aligned Right aligned 3#
  8. 8. Buttons Placement: Primary Action 8 / 30 Adapt buttons position Primary action on outer edge Natural placement Tertiary Secondary Primary 4#
  9. 9. Color as meaning 9 / 30 5# Use color to differentiate button types Limit color selection Cancel
  10. 10. Color: Destructive Actions 10 / 30 Red is a strong visual cue that captures attention Do not use regular colors, like Blue Always ask for Confirmation for destructive actions 5# Explain the consequences
  11. 11. Affordance 11 / 30 p2# Cues which give a hint on how users may interact with an object
  12. 12. Affordance: Links 12 / 30 Differentiate links from content Non-linked content Hyperlinked content Hard to recognize p2#
  13. 13. Buttons vs. Links 13 / 30 Use for Navigation Doesn’t affect the interface Use for Actions Affects the interface 6#
  14. 14. Objects that are close together are perceived to be related Proximity (Gestalt) 14 / 30 p3#
  15. 15. Proximity: Menus 15 / 30 p3# Use spacing to group similar items
  16. 16. Objects sharing attributes are perceived to be related Similarity (Gestalt) 16 / 30 p4# Color, size, shape or orientation can be used for contrast
  17. 17. Law of Unity (Gestalt) 17 / 30 p5# Objects connected by lines or boxes are perceived to be related Overrides cues from proximity or similarity
  18. 18. Law of Unity: Grouping 18 / 30 p5# Using lines and backgrounds to group related elements
  19. 19. Choice Paralysis (Hick’s Law) 19 / 30 p6# The time to make a decision increases with the number and complexity of choices Recommended
  20. 20. 7±2 Rule (Miller’s Law) 20 / 30 p7# Human brain is limited to retain 7±2 items in the short-term memory at one time Limit menu entries The new estimate is 4±1 chunks
  21. 21. Serial Position Effect 21 / 30 p8# We remember best the first and last items in a serie
  22. 22. Chunking 22 / 30 p9# Group items to make them easier to process and remember
  23. 23. Form Fields 23 / 30 Size fields accordingly Use Placeholders Use Masks and Limiters Focus state for selected field Highlight and explain error White background triggers the tendency to fill empty spaces Place label on top 7#
  24. 24. Text Align: Numbers 24 / 30 Hard to compare values Right-align numbers 8#
  25. 25. Text Align: Tables 25 / 30 Hard to scan Choose the right alignment 8#
  26. 26. Icon Metaphor 26 / 30 9# Iconography is not universal
  27. 27. Icon + Text 27 / 30 10#
  28. 28. Learn more principles and apply them in an Open Source project of your choice Want more?
  29. 29. Thank you @evalica Questions? #APACHECON

×