- Duplicate the layer
- Crop as a circle
- Add Bevel with height 18
In my previous article we wrote about what ‘above the fold’ means, when to care about it, principles for web design and collected expert opinion.
What I’d like to answer now is:
The fold for 1024×768 desktop resolutions is on average 578 pixels down from the top of a webpage. *
This is based on my research and average figures taken from various sources (industry experts, ‘best practice’ blogs, etc).
How wide should your site be? In terms of width (pixels across to prevent horizontal scrollbar) for PC only: 1004 pixels across. (Mac= 972) Anything to the right of 1004 pixels across the webpage is much less likely to be seen by the 1024×768 audience.
* note that 578 is probably a generous figure. I would argue that 285 is worst-case but common case scenario, giving a ‘safe’ or secondary fold at 768-285=483 pixels. Averaging 578 and 483 gives you 530.
** This is average. For any person the fold can be anywhere between 285 and 714, but those are min/max extremes and rare. If you consider the fold to be somewhere in the 483 – 600 region, or about 70 pixels above and below 550 would be good design practice.
If there is a fold…it’s at:
Anne Holland: 1024×768 15″ : 980 x 520
Jungle Minds: 714 pixels van de bovenrand (768 pixels minus 2 x 27 pixels voor de balken)
At a popular PL telco site, 7.6% (half a million users) had a browser height of 500 to 549. (Measured with SiteCatalyst for the 6-month period Aug 2010 – Feb 2011)
Screen resolutions on desktops are getting higher, but increasing popularity of mobiles and iPad. If you have a mobile equivalent site (designed especially for mobile), you have the challenge that your (responsive/mobile) site is going to viewed by a wide range of viewport resolutions.
So don’t worry about it too much. If you want certain things to be exactly scaled to the first pagelength, and show nothing more nothing less, then use coding techniques.
It is rare that users don’t scroll anymore, especially on mobiles. However, there is the odd case where it could represent an issue on your site, for example see image here
The lowest resolution to take into account is the iPhone 3 and iPhone 4 (both effectively use 320×480). The fold (if using the Safari browser) is around 480 minus status bar (20px) minus bottom toolbar (44px @ iPhone4) minus 44px top navigation browser bar. In this worst-case primary fold scenario this gives a primary fold at 372 px. Other sources say: 360px, 416px, … , so in the range 360 – 416.
This assumes there is a significant proportion of user that still have an iPhone 3 or phone with a similar or lower resolution. New iOS versions may have different toolbar and statusbar heights. See the differences example here. Always check your own site stats (Google Analytics > Resolution)
Screen dimensions of popular mobiles/tablets/monitors: http://screensiz.es/
Browser screen resizers: http://creatiface.com/tools/responsive-design-test
Articles discussing the ‘new’ fold considering tablet/mobile
https://storify.com/xiwcx/there-is-no-fold-1 TIP (to read)
Where to get device/browser/iOS stats:
There’s so much to take into account (landscape/portrait, 1000 devices, 100 browsers, status bar heights, virtual keyboards)..it could be solved programmatically (viewport.innerWidth etc), but it’s more pragmatic to design for the minimal (landscape) viewport (with standard keyboard). It’s especially a challenge when wanting to force auto-complete from a user (hint)
Typically, browser versions and types will be any that the client take into account are aware or that we have specified as compatible with the particular portal. To be more precise you should consider your audience’s resolution, platform, browser and browser version. I’ve regarded only the popular 1024×768 resolution in the most popular browsers using figures from consulted sources mentioned in the Side Notes below.
In answering this I have consulted various sources and articles. Research gets out-dated. Proper research should keep track of the source credibility, date of article, audience and – above all – resolutions and browser versions.
In this article:
http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm (…”Less content above the fold may encourage more exploration below the fold”)
[add table: site/source, resolution, fold, browsers]
How is the fold calculated? In a 1024×768 resolution, the screen is 768 pixels tall. On an average browser about 190 pixels are devoted to toolbars and other non-webpage elements (browser user interface elements and settings + extra toolbars from browser plug-ins). This gives 768 minus 190 = about 570 pixels
To get an estimate of where the fold could be on your site, check out http://www.foldtester.com/
Cautions with foldtester.com:
[add table: browser, how much to substract for each user type (average user, high-resolution user, old PC user) to calculate your fold for any resolution]
http://weenudge.com/thefold/ also check the links in the right-column
What is best practice for presenting products: list view, grids, tables .. ?
Check out any e-commerce with faceted navigation for View by List or Rows.
For inspiration on Grid, Block or Boxes view, check out: Amazon, Nordstrom, LandsEnd, Magento e-commerce platform and many others
Select and compare
Research: Product Comparison and Pricing Tables (Nick Finck)
Producten vergelijken is moeilijk
70+ examples (gallery)
25 clear and beautiful
Social skills. There are times when you have to tell a website owner or another designer what’s bad about their design or site. In face-to-face discussions the way you communicate for optimal effect is crucial.
Roles: Presenter, Facilitator, Recorder
The importance of critique
How to give critique
“This is undesired behaviour.” or “not recommended’
“This harms or does not benefit findability.”
Other possible topics for this post: how to gather and structure critique.
http://10steps.sg/articles/ways-to-handle-design-criticism/ (Dealing with criticism)
Visual design review tool
http://www.spurapp.com/ Intersections are focus points for the eye. Others: contrast, blur, 50%, mirror, contrast, grayscale.
Similar posts (still to read & evaluate
This post is under construction.
This post lists the basic and essential laws that good web interaction design should follow. Understanding these rules will improve your design skills. You can also use them as arguments to test and defend your design solutions as being ´most usable´.
Relative importance: low
One of the first steps of interaction design you should follow is determining the screen resolution. As screen real estate is scarce and users must scroll, you should take into account the scroll-line and avoid creating scroll-stoppers (see my post about the fold). Try to answer for what resolution you want to minimal design for. Find out where is the fold nowadays?
Applies to: performance, physical
Minimise the need of physical movement in an interface. On user performance wise, the ideal interface is circular. Big buttons are easier to hit.
See also: motor, click fatigue
Applies to: performance, cognitive
Users will more quickly make decisions from a list of 10 items than 2 lists of 5 items.
Proximity, similarity, etc.
Contrast/prominence, rhythm (ritmiek), templates (stramien)
KISS = Keep It Simple, Stupid!
If you can remove anything that doesn’t add value, then do so. Less is more. Progressive disclosure: hide, reduce.
Avoid junk/noise and other excess.
Too much simplicity can be dissapointing to power users. Though the problem is usually the overcomplexity of the system or process.
Reduce, hide, merge, remove
Also: swap, replace
Related reading: http://52weeksofux.com/post/548149787/simplicity-isnt-that-simple
Take things away till it breaks. A few colours are enough.
Consistency is important for learnability (the time/effort needed by a user to have a hunch how a particular UI element works or where to find certain information on a page, or on what page, or what is clickable, etc), recognition rather than recall.
You don’t have to have blue and underlined links if it is clear
Navigation is not always consistent (example: Apple.com). Where consistency fails, convention must take the upper hand.
Consistency should not go in the way of experimentation. Break conventions, but only when the new solution is truly more beneficial than the conventional solution.
Standards, common practice, familiarity, learnability. People expect certain things and are used to things working alike. Don’t make them think. They don’t always like change. Don’t innovate! Break the convention only if doing so adds significant value.
Relates to simplicity, convention
What makes me think?
Match my expectations, cultural differences and norms, etnography
In Western websites, top-left page elements get more attention than bottom-right. From eye-tracking studies we know that, on most Western websites, the parts that get most attention are those in the F-shaped pattern.
By correct use of fonts, certain page elements (such as the ‘Attention’ title of this paragraph) gets more attention, or prominence. In other words, it gets relative more noticed (noticable) than other screen elements.
By applying commonly used principles. For example, on Western websites, logo is top-left. Consistency: Things that look different should act different.
A user must learn and remember the style conventions, navigation structure and terminology used on a website. See also convention.
Miller´s magic 7.
Direct manipulation is more a type of interface (consideration) than a strict law. Examples are WYSIWYG, Wacom, Wii (body as control), and video game controller devices. There is a direct correlation between what you see and what you can manipulate. Interaction practice examples that follows from this are:
The advantages are usually: the user can feel the control, predict the response, easy to reverse the response (undo).
– ease/speed of reading (it is generally better to have two 40-character wide areas than one 80-character wide. One-and-a-half alphabet long)
– legibility (it is better not to have ALL CAPITALS headings as they are slower to read or recognise)
(grid and column): Index, Work-area, Index
In essence, the global layout should take care of:
Micro-layout (within a miniApp on webpage) should take care of:
Related principle: Gestalt theory
Flow of control is important in two respects: (1) for the efficiency in performing a task, (2) for the transparency and understandability of a screen or page. Visual flow should be from top-to-bottom and from left to right (reading direction). Dependencies (or cause-effect relations between the different parts (work areas) on screen) follow the same rule. Neither should ever be zig-zag (i.e. when you initiate an action the effect should not be visible in a part of the screen diagonally upper-left of the action button, but better bottom-right). In effect this is Fitt´s law but then applied to eyes, not to source-target.
Muscle memory, flow, instinct, modes (e.g. input mode and review mode in inline validation)
Unique to webpage design is that browsers often must clear the screen (reload or refresh a page) to show the changes. Automatic scrolling might be a solution, but then the context of the starting situation gets lost. Moreover, the changes might affect several areas on the page. The context goes completely lost in such a case, and the user has to take great effort in reestablishing. AJAX-based might be a solution.
Related to attention. Avoid making things jump around on the screen, unless the purpose is to get the user’s attention (even then, animations are usually too distracting and annoying, like the ESPN website). Smooth transitions (shrink, slide, expand) and animations (fade, glow, yellow highlight) and other effects can help eliviate the pain.
Error prevention, adequate support/help and input forgiveness, good defaults/preferences, feedback.
Designing for Interaction (book) has a chapter on Principles of Interaction Design.
More ‘laws and principles of interaction design, in the sites:
http://www.theuxbookmark.com/2009/11/interaction-design/expert-ratings-of-usability-maxims/ (34 thumb rules)
Interaction-design.org > Encyclopedia
http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ [2 read]
May contain experience keywords.
Experience keywords represent the “initial five-second” emotional reaction that personas should feel when viewing the interface.
How to make such a diagram:
– Write and divide into 3 to 5 solid concept groupings.
– then develop those into a final set of experience keywords.
– Be sure to test the appropriateness of the keywords with your team and a few key stakeholders. Believable and visually descriptive keywords will help facilitate visual strategy discussions. Choose experience keywords that you would use to describe a person; these will be easier to design for and your audience will better relate to them
-Supporting keywords with photos or other forms of imagery can also be effective.
can use supportive keywords (thesaurus?)
Source: Using research to end visual design debates
Balance – of overall screen/viewport. Influences creditibility. An imbalance can draw the eye the one region of the page.
Symmetry – of 2 opposite or side-by-side elements. Influences
color, shape, size and negative space
The first guiding principle: Elements that do not act similarly, or do not belong to the same category, shall not look the same.
Zurb tool: ….