ui and ux principles

45
Basic Web Dev Bertrand Alexander D. Paran UP ITDC

Upload: norman-caesar-tecson

Post on 08-Dec-2014

220 views

Category:

Education


3 download

DESCRIPTION

A lecture series in Basic Web Design

TRANSCRIPT

Page 1: Ui and ux principles

Basic Web DevBertrand Alexander D. Paran

UP ITDC

Page 2: Ui and ux principles

August 12: UI / UX Principles

August 13 – 22: Basic Web Programming (HTML/CSS/JAVASCRIPT)

August 26: Evaluation of Websites

Class Schedule

Page 3: Ui and ux principles

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 projectdue on the 26th

Class Requirements

Page 4: Ui and ux principles

Bertrand Alexander D. ParanUP ITDC

UI/UX Principles

Page 5: Ui and ux principles

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/

Page 6: Ui and ux principles

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 User’s Experience point of view• Be able to apply this knowledge for all future projects

Page 7: Ui and ux principles

Outline•What is UI / UX

• The Scope of UI / UX• The most Important Principles of

UI / UX Design

Page 8: Ui and ux principles

What it UI / UX?•Why do we need to study UI / UX?

Page 9: Ui and ux principles

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/eroberts/cs201/projects/2010-11/PsychologyOfTrust/ui3.html#0

Page 10: Ui and ux principles

Good Exampleshttp://dzineblog.com/2010/03/best-user-interface-design-resources-the-round-up.html

http://www.nconsulting.ca/portfolio.php

Page 11: Ui and ux principles

Bad Exampleshttp://uglyisnotgood.com/

Page 12: Ui and ux principles

More Examples• http://pcic.gov.ph/

• http://www.genicap.com/Site/

Page 13: Ui and ux principles

UI/UX Further Defined

Page 14: Ui and ux principles

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”

Page 15: Ui and ux principles

Build 1000 cars. Now.

Page 16: Ui and ux principles

http://www.popularmechanics.com/technology/engineering/gonzo/4272846

Page 17: Ui and ux principles

http://www.blog.automotiveaddicts.com/modern-car-construction-materials

Page 18: Ui and ux principles

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/review-my-work-detail.html?id=18

http://www.buzzfeed.com/

http://thegoldenarches.e-monsite.com/album/diaporama/

Page 19: Ui and ux principles

Going Back:

Page 20: Ui and ux principles

Interlude:•Watch the following vido to

highlight how UI / UX affects your business.

• https://www.youtube.com/watch?v=v3f-2WG7ONc

Page 21: Ui and ux principles

Design Principles• The principles of UI Design that

influence the overall UX• Aesthetics• Usability• Affordance

• Responsiveness• Brand Image

Page 22: Ui and ux principles

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

Page 23: Ui and ux principles

Aesthetics• Appearances have a substantial impact on

businesses

http://developme.wordpress.com/2010/03/01/debit-card-fraud/

http://www.swisschaletph.com/philippines/luzon/angeles_city/balibago/shopping_malls_banks_atm.htm

Page 24: Ui and ux principles

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/

Page 25: Ui and ux principles

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/06/dunkin-donuts.html

https://www.servula.com/blog/enhance-user-experience-on-your-website-top-15-website-hitches-to-avoid

Page 26: Ui and ux principles

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?

Page 27: Ui and ux principles

Usability• Layout

• Is your website cluttered an disorganized, making it difficult for the user to properly identify the use of it’s elements?• The lack of form in your website will ultimately give it an

amateurish appearance and detract from the website’s credibility, regardless of the quality of your product.

Page 28: Ui and ux principles

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/

Page 29: Ui and ux principles

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

Page 30: Ui and ux principles

Usabilityhttp://www.doobybrain.com/2011/01/01/space-jam-movie-website-still-online/

Page 31: Ui and ux principles

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.

Page 32: Ui and ux principles

Affordance• Examples of Affordance Implementation

• A button should look like a button and can be expected to behave like a button.

http://designreviver.com/inspiration/30-inspirational-call-to-action-buttons/

http://www.web3mantra.com/2012/02/15/30-awesome-psd-buttons/

Page 33: Ui and ux principles

Affordance• Examples of Lack of Affordance Implementation

http://www.iconarchive.com/show/food-icons-by-aha-soft/coffee-icon.html

http://www.iconarchive.com/show/mixed-icons-by-simiographics/Book-icon.html

https://www.iconfinder.com/icons/61564/blue_book_icon

http://www.iconarchive.com/show/minecraft-icons-by-chrisl21/Diamond-Sword-icon.html

Page 34: Ui and ux principles

Responsiveness• Speed

• Is your site loading fast enough to maintain the user’s 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/

Page 35: Ui and ux principles

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

Page 36: Ui and ux principles

Responsiveness• Errors

• The website should be able to provide an avenue to respond to a user’s needs

• If there are errors, a user should be provided with a way to contact the developer

Page 37: Ui and ux principles

Brand Image• What constitutes the overall image of your site

http://www.tofurious.com/marketing-tips/brand-colors-what-they-say-about-you-emotional-branding/

Page 38: Ui and ux principles

Brand Image• Brand Image examples

http://www.kollewin.com/blog/website-template/

Page 39: Ui and ux principles

Brand Image• Brand Image examples

http://www.kollewin.com/blog/website-template/

Page 40: Ui and ux principles

Brand Image• Brand Image examples

http://www.kollewin.com/blog/website-template/

Page 41: Ui and ux principles

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/

Page 42: Ui and ux principles

Brand Image• Consistency Implementation

http://colorlabsproject.com/themes/arthemia-premium/

Page 43: Ui and ux principles

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.

Page 44: Ui and ux principles

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

Page 45: Ui and ux principles

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