Download Principles of Web Design - MICC

Principles of Web Design Prof. Alberto Del Bimbo
Integrated with slides from: Peep Laja: h;p://conversionxl.com/ Adam Mann: h;p://simplyadammann.com/ Jeff Pa;on: www.AgileProductDesign.com Introductory issues Human-­‐computer interacHon • 
Human-­‐computer interacHve communicaHon has many features in common with interpersonal communicaHon, but also has some disHnct differences • 
Two problems must be addressed in interacHve systems design: –  How should informaHon from the user be provided to the computer system –  How should informaHon from the computer system be presented to the user • 
These issues were addressed by the special interest group on CHI of the AssociaHon for CompuHng Machinery, created in 1982. Research in CHI has largely expanded in the last ten years…. User interfaces • 
• 
The user interface is the converHng media between the user and the system. User interfaces should be designed to match the skills, experience and expectaHons of users Different types of interfaces have been available from the early Hmes to nowadays 1980s Command GUI Advanced graphical (mul7media, virtual reality..) 1990s Web interfaces Speech (voice) Pen, gesture, and touch 2000s Mobile Mul7modal Tangible Augmented and mixed reality Wearable Robo7c InteracHon styles Interaction*
style*
Main******
advantages*
Main************************
disadvantages*
Application*
examples*
Direct'
manipulation'
Fast*and*intuitive*
interaction*
Easy*to*learn!
May*be*hard*to*implement.*
Only*suitable*where*there*is*a*
visual*metaphor*for*tasks*and*
objects.!
Video*games**
CAD*systems!
!
Menu'
selection'
Avoids*user*error*
Slow*for*experienced*users.*
Little*typing*required! Can*become*complex*if*many*
menu*options.!
Most*generalG
purpose*systems!
Form'fill3in'
Simple*data*entry*
Easy*to*learn*
Checkable!
Stock*control,*
Personal*loan*
processing!
Command'
language'
Powerful*and*flexible! Hard*to*learn.*
Poor*error*management.!
Operating*
systems,*
Command*and*
control*systems!
Natural'
language!
Accessible*to*casual*
users*
Easily*extended!
Information*
retrieval*systems*
*
Takes*up*a*lot*of*screen*space.*
Causes*problems*where*user*
options*do*not*match*the*form*
fields.!
Requires*more*typing.*
Natural*language*understanding*
systems*are*unreliable.!
World Wide Web •  World Wide Web: -­‐  A browser fetches a web page from a server sending a request in a standard HTTP format, containing a page address -­‐  Web pages contain instrucHons on how to be displayed, expressed with HTML tags -­‐  Browsers display each page by reading these instrucHons -­‐  Whatever type of server, the user interface is the same -­‐  Links can point to anything that can be displayed -­‐  ……. Print vs web pages: similariHes WriHng principles –  Customized content for different user groups –  Clear, concise, accurate, and relevant content –  Simple and easy-­‐to-­‐understand language Design elements –  Good typography –  White space, emphasis, and contrast –  Simple, clu;er-­‐free page design and layout 7
Print vs web pages: differences Features Print Pages Web Pages Content Uniform for all users User specific content Links and labels Not available Standard features Naviga7on tools Not available Standard features Distribu7on Limited / local distribuHon Global distribuHon Sound and Anima7on Not available Available in different formats Performance Does not vary Internet speed affects performance Interac7vity Low volume and delayed response Hmes Instant response Graphical User Interfaces vs web interfaces: differences In tradiHonal GUI, the designer controls every pixel on the screen: •  the designer knows the system he/she is designing for, the fonts it has installed, the dimension of the screen….. •  the difference in screen area between a laptop and a high-­‐end workstaHon is a factor of 4-­‐6 For web interfaces may be accessing the web through tradiHonal computers, a tablet, a smartphone… and through different connecHons: •  the difference in screen area is a factor of 40-­‐100 between handhelds and workstaHons •  there is a factor of >1,000 in bandwidth between modems and high speed connecHons In tradiHonal GUI, the designer can control where the user can go when: –  each applicaHon is regarded as a self-­‐defined operaHonal space –  users accept that interfaces reflect the specific goals that the applicaHon is addressing For web interfaces, the designer must take into account that users feel that they are using the web as a whole rather than any specific site: –  users want to use a site on the basis of the web convenHons that reflect their experience using other sites. They complain whenever they are exposed to sites with too diverging ways of doing things –  the web has become a genre and each site is interpreted relaHve to the rules of the genre Web users • 
Web users generally have a purpose. Typically they are impaHent and conservaHve. They will usually leave if: –  web pages take too long Hme to load –  they can't easily find what they want on your site –  there are too many steps from the beginning to the end of the sequence of pages they are following –  learning new techniques for using web pages • 
Users do not have full domain knowledge and must navigate through web pages. Users of the web browse instead of reading informaHon: –  when reading, it is about 25% slower than reading from paper (J. Nielsen) –  prolonged reading from a screen can cause discomfort –  even the best screens are less clear than printed books Cultural nuances of web users • 
AccounHng for cultural diversity is vitally important in the web: –  There are colors to be avoided: individual colors can be associated with meanings according to the local culture –  Some cultures associate the poinHng-­‐finger cursor with thieves –  Some cultures don't accept female voice-­‐overs –  Icons with hand gestures of any kind can have undesired meanings –  Clip art of local figures and landmarks are ofen completely useless or obscure outside their home cultures –  ….. Usability and Accessibility • 
Usability is a major issue in web design. It addresses all general web design principles that refer to general human capabiliHes and modes of operaHon/
percepHon: “who is the user and its characterizing elements” • 
Accessibility is the property according to which a website can be accessed by any individual independently on its physical abiliHes, equipment, connecHvity and context of use.To make web accessible to any user, web accessibility principles have been defined by W3C Usability figures • 
Four main usability figures: –  EffecHveness: It measures the capability to perform appropriate free of error results, accuracy, completeness, absence of errors, quality –  Efficiency: Capability to complete a number of tasks in a specified Hme interval, measured as the Hme to complete or the number of operaHons needed in a certain Hme interval –  Learnability (memorability): It measures how much it is easy to complete some task. It is measured in terms of Hme needed to complete the task, the need of help requested –  SubjecHve saHsfacHon: It is mainly concerned with pleasanteness of interacHon. • 
Usability translates into general “good rules” for website and web app design. There is a minimum of overlap between these figures but they can be measured according to well defined measures. Usability is measured through tesHng. Users placed in front of a prospecHve system are asked to perform specific tasks without instrucHon or guidance • 
Accessibility guidelines • 
• 
• 
W3C defined a number of guidelines that must be followed to make a website accessible. They are available at h;p://www.w3.org/WAI/ Each guideline has a number of checkpoints that state rules to be followed. Checkpoints have priority levels: –  Priority Level 1 mandatory –  Priority Level 2 strongly suggested –  Priority Level 3 opHonal Accessibility can be verified automaHcally, once the website or the applicaHon has been developed. Three accessibility levels: –  A All check points at Priority Level 1 saHsfied –  AA All check points at Priority Level 1 and 2 saHsfied –  AAA All check points at Priority Level 1, 2 and 3 saHsfied User Experience
• 
Suppose you have considered users, usability, and tuned your visual design, but users don’t love your sofware. User Experience is all what about how do users feel about it. It is a funcHon of users, their goals, and the tasks the sofware supports to help them reach their goals. • 
User Experience (UX) is the third factor to consider for the evaluaHon of quality of web applicaHons considered in its context of use. It refers to the overall experience a user has with the web applicaHon. It has gained increasing relevance, recently • 
Three characterisHcs of design to observe (D. Norman): –  Visceral: what is the product’s iniHal impact or appearance? –  Behavioral: how does the object feel to use? –  ReflecHve: what does the object make you think about? What does it say about its owner? Web Design Principles Inspiring factors for web design •  Web sites must be designed according to rules that are based on: -  the basic principles of communicaHon -  the typical characterisHcs of the web user -  the unique characterisHcs of the web electronic media • 
The user viewpoint Typical web design errors and impacts on usability • 
DistracHng moHon • 
Form not following funcHon • 
Ambiguous links • 
Unhelpful search • 
Design doesn’t care what the user cares about • 
Too many steps to access the desired informaHon –  AdverHsing has contrasHng goals and effects –  Different impact on transit and content pages (against efficacy) –  Too much Hme spent waiHng for decoraHon –  Pleasantness against speed (saHsfacHon vs efficiency) –  Where link goes? –  Is that useful for the task?.. (against efficiency/efficacy) –  Searching is too complex –  Too many results or no useful result (against efficiency/efficacy) –  OpHmize normal cases –  Typically humans keep in mind 4 to 7 items at the same Hme (against efficiency) –  Long sequences of pages, with few choices each should be avoided • 
Too long access Hme • 
–  Access Hme per page should not be higher than 5-­‐6 sec.. (against efficiency) ….. Web site structure
• 
The quality of a web site depends on the definiHon of an efficient organizaHon of informaHon in a way that permits to minimize the number of steps needed to reach any piece of informaHon and memory effort. • 
InformaHon content must be divided into blocks (chunks). Chunks are the basic elements of informaHon units, on which web pages are built. These should be sufficiently short and independent each other as much as possible. Page independency allows to access each page free of any pre-­‐requisite informaHon. On the other hand, page independency requires that page headers are very visible and very informa7ve • 
• 
InformaHon units can be related each other using different logical schemas: –  Sequence –  Grid –  Hierarchy –  Web-­‐like • 
• 
Sequence: in any sequenHal order (temporal, alphabeHcal, from general to specific ….). It is typical for indices Grid: permits a direct connecHon between elements, considering two variables. Useful for expert users that are aware of contents •  Hierarchy: organized as a tree, from general to specific. Access is defined through menus. The tree must be balanced and not too deep. The home page must have a limited number of links, include the directory of the general categories; the appropriate number of links for each submenu is 4 or 5. The most common structure • 
Web-­‐like: is based on associaHon links. Links are used according to the user’s interest. Typical of web sites with many links but is appropriate only for small sites Web site structure space •  web like is appropriate for Web-­‐like is appropriate for browsing Hierarchical and sequenHal are appropriate for searching Web Pages • 
Main design principles for web pages are: –  Emphasis –  Contrast –  Typography –  Color –  Graphics –  NavigaHon –  Visual Balance Web page design principles: emphasis • 
• 
• 
Communicates your message effecHvely Highlights placement of most important topics Determines informaHon organizaHon on the page • 
Common ways to emphasize: –  Use of white space to make elements stand apart –  Bold, big, italics, different colors, borders, …. –  Effects (drop shadow, glow, texture), shapes, …. Strong visual hierarchy • 
Visual hierarchy is one of the most important principles behind effecHve web design: visual hierarchy is the order in which the human eye perceives what it sees Fi;’s Law • 
Fi;’s Law sHpulates that the Hme required to move to a target area (e.g. click a bu;on) is a funcHon of the distance to the target and the size of the target: the bigger an object and the closer it is to us, the easier it is to use it • 
In desktop interfaces the bo;om lef corner is considered the most valuable real estate since the corners are technically the most accessible. This does not, apply to web design due to scrolling White space • 
White space is the porHon of a page lef “empty”. It’s the space between graphics, margins, space between columns, space between lines of type or visuals • 
It should not be considered merely ‘blank’ space: it enables the objects in it to exist at all and emphasize hierarchy: the more space that is lef unused, the more a;enHon is driven to stuff that is on the page Web page design principles: contrast • 
Our minds are designed to spot the differences (in the primal age we constantly needed to scan the horizons to spot if anything has changed …) • 
Contrast generates visual interest by making page appealing. Enables easy navigaHon and directs user to desired part of the page • 
Common ways to contrast: –  Use of white space, reverse text, larger size, italics –  Borders, different colors, and effects –  DisHnct labels and links 29
• 
• 
• 
Web page design principles: consistency Establish a layout grid and a style for handling your text and graphics, then apply it consistently to build rhythm and unity across the pages of the site RepeHHon is not boring. It gives the site a consistent graphic idenHty that creates and then reinforces a disHnct sense of "place” A consistent approach to layout and navigaHon allows readers to adapt quickly to site design and to confidently predict the locaHon of informaHon and navigaHon controls across the pages of the site • 
Pages must have a consistent size and uniform organizaHon format H ow Does the Inte rnet Wo rk?
• Pa cket swi tch ed net works
– i f it u ses phone li nes, it m ust w or kl ik et he
phon esyste m , r igh t? WRON G !
– cir cui t swi t ch ed/packet sw it ched
di f er ence
• A b ett er model - th ep ost al syst em
– t hink of a packet as an envel opew i th an
addr ess
– poi nt -t o- poin t coll ecti onan ddi str i but ion
What Makes the
Internet G o?
H
H
Pr ot ocols - - r ules of
t her oad f or net s
Packe ts
œ1- 1
500 chara cter s
œt ra vel out of
sequence andby
vari ous r ou
t es
H
H
Ro uter s - connect
var iou snet wor ks
The I nter net
Pr ot ocol
œaddresses t he
packets
œt e
l ls th er oute r s t he
best way t ogo
H ow Does the Inte rnet Wo rk?
• Th eT ransmi ssion C on tr ol Prot ocol
– br eaks t hei nf oi nt opacket s, put s or der ing
i nfo on andi nser ts int oI P “envel opes”
– opens the envel opes and r eass em bles
– i f packet s ar em is si ngor dam aged, it asks
f or r etr ansm is si on- - par i ty bit s
• Th eU ser Dat ag ra mPro to col ( UDP )
– used for sh ort messages onl y
– doesn’ t wo r y about m is si ngp ack ets
Avoid this • 
• 
A "signature" graphic and page layout allows the reader to grasp immediately the purpose of the document and its relaHon to other pages. Unlike designers of print documents, designers of web systems can never be sure what other pages the reader has seen before linking to the current page If you choose a graphic theme, use it throughout the web site (from home page banner, to banners at the top of interior pages) Web page design principles: typography • 
• 
• 
Refers to the arrangement of text on a page Enhances readability and increases user friendliness Complements graphics and images to culHvate an image in the reader’s mind 33
Organizing the prose • 
Documents wri;en to be read online must be concise and structured for scanning. People tend to skim web pages rather than read them word by word • 
A few principles of well organized prose: –  Use headings, lists, and typographical emphasis for words or secHons you wish to highlight; these are the elements that will grab the user's a;enHon during a quick scan. Keep these elements clear and precise –  Use page and secHon heads to describe the material –  Place the important facts near the top of the first paragraph where users can find them quickly –  The "inverted pyramid" style used in journalism works well on web pages, with the conclusion appearing at the beginning of a text Inverted pyramid style • 
Inverted pyramid examples Text style rules • 
Rules to remember for text: –  Choose between mono-­‐spaced and proporHonal text spacing and sHck to the choice –  Choose fonts that: •  fit the character of your site •  maintain a clean look by mixing serif and sans serif fonts •  are easily readable on a computer screen: use fonts no bigger than 14-­‐18 pts or smaller than 12-­‐10 pts for body text •  are widely available across many browsers and operaHng systems –  Provide alternaHves for unsupported fonts on different browsers –  Avoid dancing le;ers and words About fonts • 
Fonts must favor readability: serif (eg. Times Roman) is appropriate for long, extended text; sans serif (eg. Arial) for “headlines”. According to this, sans serif is preferred for web wrt serif • 
Avoid heavy use of all upper case: studies have found that mixed case promotes faster reading. Words must be wri;en in small caps with capital iniHals. Text and background must be highly contrasted Web page design principles: color • 
• 
• 
• 
Defines character and idenHty of the web page Draws eyes to page elements and enhances readability Impacts and influences reader’s mind and opinion of the website Adds recall value and draws associaHon to ideas or brands • 
Color -­‐ Rules to remember –  Limit use to 4 max disHnct colors –  Understand the color wheel and how to use color schemes –  Pay a;enHon to color semanHcs in different cultures. Use black and white when in doubt –  Limit mixing complementary colors such as blue and orange, green and red –  Test color schemes for readability by visually impaired readers 38
Color wheel •  Colors have meanings and provoke sensaHons. Color percepHon coding (western culture): colours can be arranged in a circle; warm and cold colours are opponent colors Cold colours
Warm colours
Color semanHcs William Horton’s Color Table PercepHon + semanHcs: combining colors Kobayashi, 1990,
Color image scale
Color Schemes • 
• 
• 
MonochromaHc: uses only one color with its different Hnts and shades Uses three to five colors next to each other on the color wheel Complementary: uses colors opposite to each other on the color wheel to provide stark contrast. Color disabiliHes • 
1 in 12 people have some sort of color deficiency (about 8% of men and 0.4% of women in the US) –  about 6% of men and 0.38% of women are deuteranomalous (i.e. green cones missing) (around 95% of all color deficient women) –  about 1.5% of men are protanomalous (i.e. red cones missing) –  about 0.003% of the populaHon have tritanopia (i.e. blue cones missing) –  about 0.005% of the populaHon are totally colour blind •  As seen by human subjects affected by deuteranomaly (confusion between red and green, i.e. green deficiency) •  As seen by human subjects affected by protanomaly (confusion between red and green, i.e. red deficiency) •  As seen by human subjects affected by tritanopy (confusion between blu and green, i.e. blue deficiency) •  Web sites and tools for checking colors to support color deficiencies
Web Accessibility IniHaHve – W3C: h;p://www.w3.org/WAI/ Color blind: h;p://colorfilter.wickline.org/ Sim daltonism: h;p://michelf.com/projects/sim-­‐daltonism/ DiodaH accessibility: h;p://accessibile.diodaH.org/agc/index.html …… Web page design principles: graphics • 
Rules to remember: –  Use the right file format for different images: •  GIF format for non-­‐photographic images up to 256 colors •  JPEG format for photographs and images with rich and complex color variaHons –  Place bu;ons and boxes at the top of the page –  Use small but standard icons for recognizable concepts (mail, home page…) –  Use browser-­‐safe colors for graphics and backgrounds GIF – 2.5Kb JPEG – 4.6Kb JPEG – 25Kb GIF – 44Kb Images •  Divide browser window into separate secHons to view graphics clearly •  OpHmize file size (dimensions) by crop and scale •  Relevance-­‐enhanced image reducHon results in images that preserve both context and detail, even at very small sizes cropped scaled cropped and scaled AnimaHons •  Make animated graphics turn off automaHcally to minimize distracHon •  Avoid flashing graphic objects Web page design principles: navigaHon • 
NavigaHon refers to the way a web page is structured for use: directs users to desired desHnaHon by providing visual clues and maintains user focus • 
Rules to remember: –  Group navigaHon tools in one place –  Keep tools verHcally or horizontally aligned –  Present all available features as bu;ons, bars, tabs, text links to help visual direcHon –  Place ‘bread crumb trail’ visual clues to where the user is –  Use a site map or an index 49
Web page design principles: visual balance • 
Visual balance refers to the combinaHon of visual elements such as lines, images, text, shapes, and color on a page: is used to keep elements evenly distributed without leaning too much on any one in parHcular • 
Common ways to achieve visual balance: –  divine proporHons –  placing elements based on how eyes scan and follow –  considering Gestalt’s laws like alignment, repeHHon, proximity of elements…. –  using text links, navigaHon tools, graphics such as arrows, poinHng fingers, curvy lines, etc. 50
Divine ProporHons • 
Golden RaHo is a magical number 1.618 that makes all things proporHoned to it aestheHcally pleasing (or so it is believed) • 
There is also the Fibonacci sequence where each term is defined as the sum of the two previous terms: 0, 1, 1, 2, 3, 5, 8, 13, 21 and so on Rule of Thirds • 
• 
A visual element in a web page communicates ideas much faster than any text The best images follow the Rule of Thirds: an image should be imagined as divided into nine equal parts by two equally-­‐spaced horizontal lines and two equally-­‐spaced verHcal lines. Important composiHonal elements should be placed along these lines or their intersecHons Gestalt laws • 
• 
Gestalt psychology is a theory of mind and brain The central principle of Gestalt psychology is that the mind forms a global whole with self-­‐organizing tendencies. This principle maintains that the human mind considers objects in their enHrety before, or in parallel with, percepHon of their individual parts, suggesHng that the whole is other than the sum of its parts • 
There are several laws that have been defined in this theory Law of Proximity • 
People group things together that are close in space. They become a single perceived object. • 
Use grids when you define the page layout to group items logically: –  (Hidden) horizontal and verHcal lines to help locate window components –  Align related things Law of Similarity • 
Humans group similar things together. This similarity can occur in the form of shape, colour, shading or other qualiHes Shape + proximity Shading + proximity Proximity + shading Shape + shading + proximity Law of Closure • 
Humans seek completeness. With shapes that are not closed, when parts of a whole picture are missing, our percepHon fills in the visual gap Law of Symmetry • 
• 
The human mind perceives objects as being symmetrical and forming around a center point It is perceptually pleasing to be able to divide objects into an even number of symmetrical parts. When we see two symmetrical elements that are unconnected, the mind perceptually connects them to form a coherent shape Law of Common Fate • 
• 
Humans tend to perceive objects as lines that move along a path. Objects that have the same trend of moHon and are therefore on the same path are regarded as forming a group. You can use this to guide the user’s a;enHon to something (e.g. a signup form, value proposiHon etc) Law of ConHnuity • 
• 
People have a tendency to perceive a line as conHnuing its established direcHon In cases where there is an intersecHon between objects (e.g. lines), we tend to perceive the two lines as two single uninterrupted enHHes. SHmuli remains disHnct even with overlap Web Page Content • 
Content of web pages must follow the principles below: –  Clarity –  Brevity –  Informality –  Accuracy –  Relevance –  Consistency –  CompaHbility of layout and design –  Occam’s razor –  Fogg’s behavior model Web content design principles: clarity • 
• 
• 
• 
Communicate the purpose of the page clearly Use simple but appropriate language Make content self explanatory Keep informaHon well organized and labeled Web content design principles: brevity • 
• 
• 
• 
Use short sentence structures and small words Write visually scannable text Use bullet lists Write a blurb or summary of the page Web content design principles: informality • 
• 
• 
Maintain an informal and conversaHonal tone Make content interesHng to explore Experiment with design and layout to disHnguish page Web content design principles: accuracy • 
• 
• 
• 
Check facts and figures before publishing Eliminate typos and grammaHcal errors Provide references for source material Eliminate misleading links and materials Web content design principles: relevance • 
• 
• 
• 
IdenHfy target audience and customize pages to suit their needs Place the most relevant informaHon at the top Keep informaHon current and well updated Provide language opHons to make content reach a wider audience Web content design principles: consistency • 
• 
• 
Use standard terminology and key words Use a consistent organizaHon style for topics and headings Follow a style guide and use it uniformly Web content design principles: compaHbility • 
• 
• 
• 
Integrate verbal and visual elements with content Provide textual context to graphics and images through callouts, labels, etc. Make content appropriate to page length Use a matching tone to the chosen visual themes User Experience goals •  We cannot design a user experience, only design for a user experience. SelecHng terms to convey a person’s feelings, emoHons, etc., can help designers understand the mulHfaceted nature of the user experience: -­‐  saHsfying aestheHcally pleasing -­‐ 
-­‐ 
-­‐ 
-­‐ 
-­‐ 
-­‐ 
-­‐ 
-­‐ 
-­‐ 
-­‐ 
enjoyable supporHve of creaHvity engaging supporHve of creaHvity pleasurable rewarding exciHng
fun entertaining provocaHve helpful
surprising moHvaHng enhancing sociability emoHonally fulfilling challenging boring frustraHng annoying cutesey UX design principles: user centric Always be user-­‐centric. IdenHfy needs and establish requirements for the user experience. Understand how to design the app so that it fits with what people want, need and may desire •  Design differently for customers in different countries: what are the differences and which is which? Example: Anna Ikea chatbot appearance • 
UX design principles: visual appeal • 
• 
For web users first impressions ma;ers and can last for a long Hme. People make snap judgments: –  It takes about 50 milliseconds (i.e. 0.05 seconds) for users to form an opinion about a website –  That determines whether they like your site or not, whether they’ll stay or leave AestheHc Integrity (how well the appearance of the app integrates with its funcHon) and simple metaphors (to engage people visually as well as verbally) are (among the others) important factors to a;ract users UX design principles: Fogg’s behavior model • 
Fogg’s behavior model: people will take acHon when you present the trigger (call to acHon) when their moHvaHon is at their highest and it is easy to take that acHon www.BehaviorModel.org B.J. Fogg UX design principles: keep user’s moHvaHon • 
Once the user is on the website keep her/his moHvaHon and a;enHon high: –  provide novelty in every screen; novelty promotes informaHon transmission –  capture a;enHon using large life images relevant to content (most of the viewing Hme is spent above the and on the lef side of the screen). –  Another great way is using photos of people. UX design principles: keep design simple • 
Occam’s Razor is a principle urging one to select among compeHng hypotheses that which makes the fewest assumpHons and thereby offers the simplest explanaHon of the effect • 
To put it in the design context, Occam’s Razor states that the simplest soluHon is usually best: –  Don’t overuse mulHmedia and graphics –  Don’t fill pages with too much informaHon –  Don’t use jarring colors and fonts –  Don’t keep inacHve links –  ….. UX design principles: persuasive design • 
The more opHons a user has, the more difficult the website will be to use. The process of eliminaHng distracHng opHons has to be conHnous throughout the design process • 
• 
Get people to do what you want without using words In web sites for e-­‐commerce choosing is hard work: too much choice paralyzes. What stands out get picked. • 
• 
Hick’s law says that with every addiHonal choice increases the Hme to take a decision rank elements according to business objecHve Result: more sales The Apple UX design principles • 
User-­‐friendly, intuiHve experience incorporate design principles that are based on the way people think and work • 
AestheHc Integrity It’s a measure of how well the appearance of the app integrates with its func7on” : –  Keep decoraHve elements subtle and in the background, while giving prominence to the tasks people want to perform –  Provide standard controls and behaviors so people don’t have to figure out what to do or how to do it –  Give users a clear message about your website’s purpose and idenHty, and create a design that appropriate for the funcHonality you offer • 
Consistency “Consistency in the interface allows people to transfer their knowledge and skills from one app to another. Take advantage of the standards and paradigms people are comfortable with”: –  be consistent with current Web standards. Make navigaHon easy to find and understand –  Be you consistent within the website. Use the same icons, let all have the same meaning, make all pages with the same layout… –  If you redesign your website, make it somewhat consistent with the previous design, so that users can easily adapt to the changes you’ve made • 
Direct ManipulaHon “When people directly manipulate onscreen objects instead of using separate controls to manipulate them, they’re more engaged with the task and they more readily understand the results of their ac7ons”: –  Keep your website working opHmally, so slow page-­‐loads don’t slow people down. –  Have links change color with a hover and a click –  People want to be able to interact with your website, so give them as many opportuniHes to do so as possible • 
Feedback “Feedback acknowledges people’s ac7ons and assures them that processing is occurring. People expect immediate feedback when they operate a control, and they appreciate status updates during lengthy opera7ons”: –  Subtle animaHon can give people meaningful feedback that helps clarify the results of their acHons (for example, lists can animate the addiHon of a new row to help people track the change visually) –  Sound can give people useful feedback (but sound shouldn’t be the primary or sole feedback mechanism because people may use their devices in places where they can’t hear or where they must turn off the sound) • 
Metaphors “When virtual objects and ac7ons in an app are metaphors for objects and ac7ons in the real world, users quickly grasp how to use the app” –  use simple metaphors to engage people visually as well as verbally –  use icons that create associaHons for your visitors –  give intuiHve names to your navigaHon bu;ons • 
User Control “Users feel more in control of an app when behaviors and controls are familiar and predictable. And, when ac7ons are simple and straighUorward, users can easily understand and remember them”: –  the interface should be so intuiHve and work so seamlessly that it appears invisible –  let people cancel an operaHon before it begins, give them a chance to confirm an acHon that could potenHally cause problems, and to gracefully stop an operaHon that’s underway