ui and ux principles

Download Ui and ux principles

Post on 08-Dec-2014




2 download

Embed Size (px)


A lecture series in Basic Web Design


  • 1. Basic Web Dev Bertrand Alexander D. Paran UP ITDC

2. August 12: UI / UX Principles August 13 22: Basic Web Programming (HTML/CSS/JAVASCRIPT) August 26: Evaluation of Websites Class Schedule 3. 1 PowerPoint demonstrating the principles f UI/UX 1 website as an exercise using HTML/CSS and JavaScript due on the 18th of August 1 website as a final project due on the 26th Class Requirements 4. Bertrand Alexander D. Paran UP ITDC UI/UX Principles 5. UI/UX Principles http://www.theworldsworstwebsiteever.com/ http://www2.warnerbros.com/spacejam/movie/jam.htm http://www.sickchirpse.com/10-of-the-worst-websites- ever/ http://uglyisnotgood.com/ 6. By the end of this lesson: Ascertain a basic understanding of what precisely UI/UX is Understand and be able to relate the importance of UX from a business perspective Evaluate designs from a Users Experience point of view Be able to apply this knowledge for all future projects 7. Outline What is UI / UX The Scope of UI / UX The most Important Principles of UI / UX Design 8. What it UI / UX? Why do we need to study UI / UX? 9. Put Bluntly: UI is the platform that the user interacts with when using your program. UX it the totality of the experience resulting from his/her use of your program. http://www.convax.com /subservice/webdesign/ http://blog.lexa.spb.ru/archives/tag /web http://cs.stanford.edu/people/erober ts/cs201/projects/2010- 11/PsychologyOfTrust/ui3.html#0 10. Good Examples http://dzineblog.com/2 010/03/best-user- interface-design- resources-the-round- up.html http://www.nconsulting .ca/portfolio.php 11. Bad Examples http://uglyisnotgood.com/ 12. More Examples http://pcic.gov.ph/ http://www.genicap.com/Site/ 13. UI/UX Further Defined 14. It is a form of Engineering The practice of approaching the design of anything using proven and time tested knowledge in pursuit of maximum efficiency and effectivity UI/UX is the practice of designing websites and web applications pursuant of making the user experience better using proven and time tested knowledge To study UI/UX is to study the engineering of websites 15. Build 1000 cars. Now. 16. http://www.popularmechanics.com/technology/engineering/gonzo/ 4272846 17. http://www.blog.automotiveaddicts.com/modern-car-construction- materials 18. The Scope of UI/UX Know the objective of your website. Engineer your website so that its design is centered around that goal. http://coolhomepages.com/revie w-my-work-detail.html?id=18 http://www.buzzfeed.com/ http://thegoldenarches.e- monsite.com/album/diaporam a/ 19. Going Back: 20. Interlude: Watch the following vido to highlight how UI / UX affects your business. https://www.youtube.com/watch?v=v3f- 2WG7ONc 21. Design Principles The principles of UI Design that influence the overall UX Aesthetics Usability Affordance Responsiveness Brand Image 22. Aesthetics Beauty is on the inside? Unfortunately, not for businesses in a competitive world Is the study of how things are known via the senses 23. Aesthetics Appearances have a substantial impact on businesses http://developme.wordpress.com/2010 /03/01/debit-card-fraud/ http://www.swisschaletph.com/philippine s/luzon/angeles_city/balibago/shopping_ malls_banks_atm.htm 24. Aesthetics People identify, and avoid certain personalities Trust is related to personality Perception and expectations are linked to personality http://www.fanpop.com/clubs/steve- carell/images/25499065/title/steve- carell-l-wallpaper http://ibankcoin.com/chessnwine/ 2011/04/29/car-salesmen-giving- the-high-pressure-sales-pitch/ 25. Aesthetics Consumers judge products based on their companies Consider what type of personality you are creating with your application based on appearance http://mangalsoni.blogspot.com/2012/0 6/dunkin-donuts.html https://www.servula.com/blog/enhanc e-user-experience-on-your-website- top-15-website-hitches-to-avoid 26. Usability The extent of ease that users experience when using your site Is your site easy or hard to use? What are the factors that influence the ease or difficulty of using your website? 27. Usability Layout Is your website cluttered an disorganized, making it difficult for the user to properly identify the use of its elements? The lack of form in your website will ultimately give it an amateurish appearance and detract from the websites credibility, regardless of the quality of your product. 28. Usability Bad Layout http://www.doobybrain.com/2009/11/05/ new-york-yankees-website-is-a-cluttered- mess/ http://www.hongkiat.com/blog/why- your-blog-repels-clients/ 29. Usability Content Is the text misleading, confusing or not properly representing the elements they are designed to describe? Are there crucial elements missing from your site (or just difficult to find?) Avoid putting unnecessary details and distractions in your website that do not contribute to its function 30. Usability http://www.doobybrain.com /2011/01/01/space-jam- movie-website-still-online/ 31. Affordance Affordance is the science of how the image or functionality of an object adheres to what is expected of it. When effectively executed, a user should be able to know what to do with it. The 4 second rule when it comes to Web Design, a user should be able to identify the purpose of the website and each individual element within the first 4 seconds of looking at it. This concept applies to entire websites. 32. Affordance Examples of Affordance Implementation A button should look like a button and can be expected to behave like a button. http://designreviver.com/inspirat ion/30-inspirational-call-to- action-buttons/ http://www.web3mantra.com/20 12/02/15/30-awesome-psd- buttons/ 33. Affordance Examples of Lack of Affordance Implementation http://www.iconar chive.com/show/f ood-icons-by-aha- soft/coffee- icon.html http://www.icona rchive.com/show/ mixed-icons-by- simiographics/Bo ok-icon.html https://www.iconf inder.com/icons/6 1564/blue_book_i con http://www.icona rchive.com/show/ minecraft-icons- by- chrisl21/Diamond -Sword-icon.html 34. Responsiveness Speed Is your site loading fast enough to maintain the users attention? Are the images you are using too large to load quickly? Is the code you are using efficient? https://dribbble.com/shots/955491-Speed http://www.iconsfind.com/20131216/speed- icon/ 35. Responsiveness Feedback Denotes the measure of a websites capacity to react with user input, this contributes greatly to the UX Buttons that depress on click Loading indicators for processes that take time Confirmation messages that appear after actions performed 36. Responsiveness Errors The website should be able to provide an avenue to respond to a users needs If there are errors, a user should be provided with a way to contact the developer 37. Brand Image What constitutes the overall image of your site http://www.tofuri ous.com/marketin g-tips/brand- colors-what-they- say-about-you- emotional- branding/ 38. Brand Image Brand Image examples http://www.kolle win.com/blog/we bsite-template/ 39. Brand Image Brand Image examples http://www.kolle win.com/blog/we bsite-template/ 40. Brand Image Brand Image examples http://www.kolle win.com/blog/we bsite-template/ 41. Brand Image Consistency It is important to maintain a consistent design throughout all pages, one that is commensurate with the image of the brand. http://colorlabsproject.com/themes/arthemia-premium/ 42. Brand Image Consistency Implementation http://colorlabsproject.com/themes/art hemia-premium/ 43. Brand Image Consistency Standards and conventions should be applied all throughout each page If the search bar is at the upper right, then it should be at the upper right for all pages As users move through your site, they should be reassured that they are still in the same place by a unifying theme Applies not only to obvious elements like logos and navigation, but also content elements like fonts and backgrounds. 44. Summary UI is the congregation of the front facing elements that your users interact with UI / UX can be applied anywhere, not just websites or programmes UI / UX Design Principles: Aesthetics Usability Affordance Responsiveness Brand Image 45. Exercise Form into 6 groups Research about any company website and create a 10 minute PowerPoint presentation explaining how the website applied the principles discussed in this lesson The PowerPoint itself has to exhibit the principles discussed in this lesson At the end of the presentation, create 3 slides demonstrating bad UI / UX design, be creative with the ugliness You may download any image on the internet to supplement the graphics you will use, so long as you credit the source