View
223
Download
3
Category
Tags:
Preview:
DESCRIPTION
A lecture series in Basic Web Design
Citation preview
Basic Web DevBertrand Alexander D. Paran
UP ITDC
August 12: UI / UX Principles
August 13 – 22: Basic Web Programming (HTML/CSS/JAVASCRIPT)
August 26: Evaluation of Websites
Class Schedule
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
Bertrand Alexander D. ParanUP ITDC
UI/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/
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
Outline•What is UI / UX
• The Scope of UI / UX• The most Important Principles of
UI / UX Design
What it UI / UX?•Why do we need to study UI / UX?
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
Good Exampleshttp://dzineblog.com/2010/03/best-user-interface-design-resources-the-round-up.html
http://www.nconsulting.ca/portfolio.php
Bad Exampleshttp://uglyisnotgood.com/
More Examples• http://pcic.gov.ph/
• http://www.genicap.com/Site/
UI/UX Further Defined
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”
Build 1000 cars. Now.
http://www.popularmechanics.com/technology/engineering/gonzo/4272846
http://www.blog.automotiveaddicts.com/modern-car-construction-materials
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/
Going Back:
Interlude:•Watch the following vido to
highlight how UI / UX affects your business.
• https://www.youtube.com/watch?v=v3f-2WG7ONc
Design Principles• The principles of UI Design that
influence the overall UX• Aesthetics• Usability• Affordance
• Responsiveness• Brand Image
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
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
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/
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
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?
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.
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/
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
Usabilityhttp://www.doobybrain.com/2011/01/01/space-jam-movie-website-still-online/
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.
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/
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
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/
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
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
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/
Brand Image• Brand Image examples
http://www.kollewin.com/blog/website-template/
Brand Image• Brand Image examples
http://www.kollewin.com/blog/website-template/
Brand Image• Brand Image examples
http://www.kollewin.com/blog/website-template/
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/
Brand Image• Consistency Implementation
http://colorlabsproject.com/themes/arthemia-premium/
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.
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
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
Recommended