What is good design?

  • 212 views
Uploaded on

Some tips to build a better web application design.

Some tips to build a better web application design.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
212
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
8
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. WHAT IS GOOD DESIGN?Saeid Zebardasthttp://zebardast.irsaeid@zebardast.ir
  • 2. THE HIERARCHY OFWEBSITE USER NEEDSAccessibility: The website can befound and used by all people.Stability: The website is consistentand trustworthy.Usability: The website is user-friendly.Reliability: The website is consistentlyavailable, without downtime.Functionality: The website offerscontent, tools and services usersvalue.Flexibility: The website adapts toneeds and wants of users.
  • 3. SERIAL POSITIONING EFFECTThe serial positioning effect, proposedby Hermann Ebbinghaus, proposes thatthe ability of people to remembersomething accurately varies with theitem’s position in a list. In web design,this most closely relates to visualhierarchy.When people browse the web, lookingthrough pages and pages ofinformation, they typically commit lessthan 10% to memory (and only 1% ifthey are looking for a key phrase ordefinition). Find helpful ways to presentyour information, and you might makeyour website and its contentmemorable.
  • 4. FITTSS LAWFitts’s Law models humaninteraction with computers. Itstates that the time and effortrequired to reach a targetdepends on the distance and sizeof the target.Certain layout structures canbecome an obstruction. classicexample of an obstruction is aclickable element that is so smallthat it requires precisemovements and targeting to click(such as a small hyperlink textviewed on a mobile device).
  • 5. COGNITIVE LOADThe amount of time it takes toaccomplish a task increases with theamount of tasks given to a person.Cognitive load is a term that describeshow our learning performance isreduced when we have many thingswe have to do at once.To put it simply: the more tasks wegive users, the slower they are able tofinish a task and the more confusedthey will become.Keep things quick and easy to followand your visitors will get what theywant faster.
  • 6. THE ZOMBIE BROWSING EFFECTZombie visitors target what they seekand don’t get distracted by other itemson display at a store or on a website.As people get used to a website, thezombie effect becomes more likely; as ina supermarket, once you know whatgoods you want and their location, youdon’t spend much time lookingelsewhere. This explains why storessometimes change their layouts; itexposes existing customers to newgoods.Zombies avoid exploration by ignoringtheir surroundings and merelyfollowing their primal instincts.
  • 7. CONDITIONING MODELSIn psychology, the term conditioning refersto the process of instilling predictablebehavior.Classical conditioning becomes relevant toweb design when we think about visitorsclosing pop-up windows or turning thevolume down on a website’s backgroundmusic. Some reactions are natural, butmany of them are conditioned byexperience. These are called learnedbehaviors.For example the learned behavior to a"Page not found" error message is to clickthe "Back" button.Instead of trying to override naturalbehavior, streamline your website byadapting to them.
  • 8. PEOPLE SEE BUTDONT WATCHSomething to bear in mind - Just because a personlooked at something on a page, it doesnt mean theyvetaken it in or that they understand what theyve seen.Often in eye tracking studies it has been shown peoplehave looked at something, but they havent taken it in.
  • 9. PEOPLE DONT READWhen online, people read very differently than when theyre reading a book or magazine.People dont read introductory text, instruction text, navigation options... almost anything ifthey can avoid it. This must be taken into account during website design, and content creation.There are several ways to try and reduce the problem:Reduce the word count of each page (ideally by half)Try to remove / minimize instruction textHighlight keywordsUse lists / bullet points where possibleBreak up text using clear sub-headingsTry to start each page / paragraph with the conclusion, so that users can decide whetherto read the page / paragraph earlyUse images instead of words where possible.
  • 10. READING BEHAVIORSOF PEOPLEInternet users don’treally read contentonline, at least accordingto a study by Dr. Nielsenon reading behaviors ofpeople on his website.His analysis shows thatpeople only read 28% ofthe text on a web pageand decreased the moretext there is on the page.
  • 11. IMPORTANT CONTENT ONTHE LEFT OF A WEB PAGE
  • 12. PEOPLE FOLLOWTHE "F" PATTERNPeople look all over the place when theyfirst land on a page.After an initial view, people pay moreattention on the areas they feel will bemost useful to them (usually thenavigation across the top and down theleft hand side, which encourages the "F"pattern to form).an article in the "about us" section of acorporate website (left)a product page on an e-commerce site(center)a search engine results page (right)
  • 13. THE PATH OF THE “Z”The premise of the Z-Layout is actually prettysimple: super-impose theletter Z on the page. Placethe items that you wantthe reader to see firstalong the top of the Z. Theeye will naturally followthe path of the Z, so thegoal is to place your “callto action” at the end.
  • 14. TOO MANY OPTIONSENSURE NONE WILL BE CHOSENChoice is demotivating.Social psychologists have noted that when people arepresented with many options, they often have a very similarreaction: they choose to do nothing instead.This is said to be the human brains ‘safety choice’, and youneed to be mindful of it.Think about your websites end goal (what needs to beaccomplished?) and focus on it relentlessly, cut out the excessuntil you are down with the essentials, and your visitors willfeel more invited to stay and click.
  • 15. VISITORS READ LONG WIDTHS OF TEXT FASTERBUT PREFER SHORTER WIDTHSThe reason that people prefer to SEE shorter textwidths is because it’s more inviting.After they actually get reading though, they tend toread faster with long widths of text, and will preferthese wider traits since their reading becomes morefluid.
  • 16. •The right aligned image is being used to shorten the line lengthof the first few sentences.•This is because additional analytic & eye-tracking studies haveshown that people are much more likely to read content if theycan get past the first few lines.•After getting people hooked, the line length goes back to normal(somewhere around 600px or more) so people can read faster.
  • 17. PEOPLE FOLLOW THE “LINE OF SIGHT” OF OTHER PEOPLE•People love big, bold pictures of other humans.•Human faces draw the most attention of nearly any image typeon the web.•People will follow the line of sight of other people•Whenever you have the option to use the image of a human face,be sure to note where it’s looking at.
  • 18. COLOR THEORYCONTRASTContrast reduceseyestrain and focusesuser attention by clearlydividing elements on apage. The most apparentexample of contrast is aneffective selection ofbackground and textcolor.
  • 19. COLOR THEORYVIBRANCYNot to sound silly, but vibrancy dictates the emotion ofyour design. Brighter colors lead the user to feel moreenergetic as a result of your design, which isparticularly effective when you are trying to advertisea product or invoke an emotional response. Darkershades relax the user, allowing their mind to focus onother things.
  • 20. CNN’s website features a stark red banner across the top, which leads toheightened emotions from users as they are stimulated by the vibrancy of thedesign (and the contrast between red, white, and black- the primary color schemeof the website).
  • 21. COLOR THEORYEFFECTIVE COLOR SCHEMETriadic Color SchemeBy using anEquilateral Triangle,you can ensure thecolors have equalvibrancy andcompliment eachother properly.
  • 22. COLOR THEORYEFFECTIVE COLOR SCHEMECompound Color Scheme(aka Split Complimentary)The Compound color scheme isbased on providing a range ofComplementary Colors: twocolors are chosen from oppositeends of the color spectrum. Bydoing so, the designer isallowed more freedom in theirdesign while also benefitingfrom the visual appeal ofcomplementary colors.
  • 23. COLOR THEORYEFFECTIVE COLOR SCHEMEAnalogousAn Analogous colorscheme is based on acareful selection of colorsin the same area of thecolor spectrum. Usually thecolors are differentiated bytheir vibrancy, and theircontrast when compared toeach other.
  • 24. COLOR THEORYCONCLUSIONChoosing colors on opposite ends of the spectrumcreates a visual harmony for the eyes.A high contrast between elements makes text easilyreadable, and guides your reader’s attention.The brighter the colors, the more mental energy theywill consume.
  • 25. BREATHING ROOMThat brings us to the concept of white space and breathing room. Ifa visitor arrives on a cluttered page filled with every possible thingimaginable, they’re going to feel overwhelmed and claustrophobic.It’s likely the page will feel haphazzard and chaotic. This leavesvisitors feeling like they don’t know where to start, which meansthey might just skip your site entirely and move on to one wherethey have some breathing room.Allow the negative space on your site to direct your visitors to theareas you want them to focus on. By combining empty space andproperly styled and proportioned elements, you can encourageyour visitors to look at a certain thing and take a desired action.
  • 26. GOOD DESIGN IS NOT JUST WHAT LOOKS GOOD.IT ALSO NEEDS TO PERFORM, CONVERT, ASTONISH, ANDFULFILL ITS PURPOSE.IT CAN BE INNOVATIVEORIT MIGHT JUST GET THE JOB DONE.
  • 27. GOOD DESIGN ISINNOVATIVEInnovative design can both be a break-throughproduct or service, and a redesign of an existingproduct or service. A breakthrough product adds abefore unseen value and function to the market andthe user, while a redesign improves an existingproduct.Innovative design always develops in tandem withinnovative technology, and can never be an end initself.
  • 28. GOOD DESIGN ISFUNCTIONALUseful design fills its intended function – and likelyboth a primary and secondary function. A usefuldesign solves problems and through its design itoptimizes a given functionality.
  • 29. GOOD DESIGN MAKES A PRODUCTUSEFULIt has to satisfy certain criteria, not only functional, butalso psychological and aesthetic. Good designemphasizes the usefulness of a product whilstdisregarding anything that could possibly detract fromit.
  • 30. GOOD DESIGN ISAESTHETICAn aesthetic product has an inherent power of beingable to fascinate and immediately appeals to its userssenses.Only well-executed objects can be beautiful. Theaesthetic quality of a product is integral to itsusefulness because products used every day have aneffect on people and their well-being.
  • 31. GOOD DESIGN ISINTUITIVEIntuitive design explains itself and makes a usermanual unnecessary. A design makes how to use,perceive, and understand a product obvious. A gooddesign explains its function.It clarifies the product’s structure. Better still, it canmake the product clearly express its function bymaking use of the user’s intuition. At best, it is self-explanatory.
  • 32. A GOOD BUSINESSAssuming a product is designed to sell, a good designdoes well in the competition and stands out in acompetitive market. A good business means a positiveprofit, why a good design sells well.
  • 33. A GOOD DESIGN ISHONESTAn honest design communicates solely the functionsand values it offers. It does not attempt to manipulatebuyers and users with promises it cannot keep.
  • 34. A GOOD DESIGN ISLONG-LASTINGIn a society of over-consumption, a good design has animportant objective. It builds on sustainability in thesense that design and materials are durable and notjust a trend. Waste and over-consumption is not a partof good design.It avoids being fashionable and therefore neverappears antiquated. Unlike fashionable design, it lastsmany years – even in today’s throwaway society.
  • 35. A GOOD DESIGN ISUSER-ORIENTEDGood design is based on its use and designed toimprove a given situation for its user. User-orienteddesign adds value both intellectual and material valueto its product and in turn increases satisfaction and thelife situation of its user.
  • 36. A GOOD DESIGN ISUNOBTRUSIVEProducts and their design should be both neutral andrestrained, to leave room for the user’s self-expression.Products fulfilling a purpose are like tools and areneither decorative objects nor works of art.
  • 37. A GOOD DESIGN ISTHOROUGH–DOWN TO THE LAST DETAILNothing must be arbitrary or left to chance. Care andaccuracy in the design process show respect towardsthe consumer.
  • 38. A GOOD DESIGN ISAS LITTLE DESIGN AS POSSIBLEThe distinction between the common “Less is more”and “Less, but better” highlighting the fact that thisapproach focuses on the essential aspects thus, theproducts are not burdened with non-essentials. Thedesirable result would then be purer and simpler.
  • 39. A GOOD DESIGN ENGAGES THROUGHINTRINSIC MOTIVATIONA good design makes the user want to engage throughintrinsic rather than extrinsic motivation.
  • 40. A GOOD DESIGN ISFOCUSEDA good design is effective and efficient in fulfilling itspurpose. It relies on as few external factors and inputsas possible, and these are easy to measure andmanipulate to achieve an expected other output. Agood design is always the simplest possible workingsolution.
  • 41. MORE RESOURCEShttps://www.vitsoe.com/gb/about/good-designhttp://ui-patterns.com/blog/What-is-good-designhttp://sixrevisions.com/usabilityaccessibility/human-behavior-theories-that-can-be-applied-to-web-design/http://www.webdesignerdepot.com/2010/05/the-psychology-of-web-design/http://inspiredm.com/5-psychology-studies-for-smarter-web-design/