Zoom effect

March 10, 2016

Powerpoint

Make a Magnifying Glass Effect in PowerPoint

  1. Duplicate the layer
  2. Crop as a circle
  3. Add Bevel with height 18

Sketch

 

Other

How To Create A Simple Zoomed Effect On Screenshots In GIMP

 

 

keywords: portfolio

Advertisements

Golden ratio in web design

August 16, 2010

http://sites.google.com/a/chromium.org/dev/user-experience/visual-design#TOC-Mathemagics


Where is the fold?

January 28, 2010

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:

  • Where is the fold? Are there any standards? What is generally agreed by designers and experts?
  • Where is the fold according to advertisers and other clients? Which browser types and versions and resolutions do they generally consider?

Where is the fold

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.

What other experts say

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)

What the stats say

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)

Fold trends

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

Chrome plug-in https://chrome.google.com/webstore/detail/dimensions-toolkit/oajdmmikmphdckpkjgkdofoegppahcak

 

Articles discussing the ‘new’ fold considering tablet/mobile

https://storify.com/xiwcx/there-is-no-fold-1  TIP  (to read)

http://moz.com/blog/life-above-and-beyond-the-fold

http://webdesign.tutsplus.com/articles/designing-for-the-new-fold-web-design-post-monitorism–webdesign-1891

http://writespeaksell.com/in-designing-a-website-for-mobile-viewing-where-is-above-the-fold-2

 

Where to get device/browser/iOS stats:

Mobile

http://tripleodeon.com/2011/12/first-understand-your-screen/

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)

 

Tablet

iPad usable screen size

 

Why there is no such thing as ‘one fold to rule them all’

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.

Determining the fold for your website and audience

  • Profile your (most important) users to get a clearer picture (latest browser/resolution stats). If you have no access to stats for your own site, then use those of popular sites that your users are likely to use.
  • Browser is not always maximized: only 50.4% of users maximise their browser windows so actual browser viewport is often smaller. (source missing). Put another way, screen resolution is not browser resolution and the two often differ [5]. In a more recent survey on our sites it was about 80%.
  • 800×600 is used on average by 8% of my users. You could argue that users with lower resolutions are more used to scrolling, and might even scroll more often (and faster?).
  • Height is the trickiest, because some (novice) users have many and/or tall browser toolbars installed. In extreme cases toolbars might be eating away 250px giving a fold of about 530px. Considering default browser settings + one average toolbar = ~170px?
  • The horizontal fold/scrollbar is equally important.
  • One source claims that 95% of above the fold screen estate should be targeted to the most common users. Debatable.
  • Rule of thumb? Two-thirds down the screen?

Side notes

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:

  • Last updated in 2008. On 9 April 2008, my visitors mostly used Firefox, MSIE6, MSIE7, and Opera 9.x.   Mac users account for 4% and 800×600 users for 6%.
  • Only 1024×768 resolution considered (still the most popular resolution for most websites ).
  • Sources that also consider Firefox or Chrome have not been consulted yet. Generally the fold of these browsers is about 100 pixels off from the Internet Explorer fold.
  • The date of any source or consulted article should be considered, as the new IE7+ browsers have a different fold due to introduction of tabbed browsing (which some users have turned off). Chrome is especially minimal hence the fold figure for this browser may be increased as mentioned above.

Sources

http://www.boxesandarrows.com/view/blasting-the-myth-of

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”)

http://www.motive.co.nz/glossary/fold.php

http://www.webmonkey.com/99/41/index3a_page2.html?tw=design

[5] http://css-tricks.com/9778-screen-resolution-notequalto-browser-window/

[add table: site/source, resolution, fold, browsers]

Calculate the fold

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:

  • It’s using global internet stats  (that is, the world-wide average). This doesn’t mean the percentages you are seeing reflect reality.
  • The trend is more and more people are using desktop/TV sizes that are getting bigger, but mobile browsing is also increasingly popular.
  • In fact, your audience might on average NOT have the internet average in terms of screen resolution, browser used, etc
  • For example there might be many people viewing your site on  iPads .
  • The site says it used “internet average”. This means low resolution (like mobiles) to high-resolution (like wide-screen TV’s)
  • Importance of the fold depends on your site stats, web skills of your audience  and the presence of ‘scroll-stopper’ elements
  • As this site demostrates, on any site the fold is not on one location but

[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]

Further reading

http://weenudge.com/thefold/  also check the links in the right-column


Product comparison

January 19, 2010

What is best practice for presenting products: list view, grids, tables .. ?

Product list view

Check out any e-commerce with faceted navigation for View by List or Rows.

Product Grids (blocks, tiles)

For inspiration on Grid, Block or Boxes view, check out: Amazon, Nordstrom, LandsEnd, Magento e-commerce platform and many others

http://www.nicolasleroy.fr/shopping-engines-interaction-design-patterns/product/

Code (inspiration)

http://robmaurizi.com/blog/2007/01/a-table-less-product-grid/

Product comparison tables or product matrix

Select and compare

Articles, research

http://www.getelastic.com/ecommerce-usability-product-comparison-matrix/
http://www.getelastic.com/23-comparison-matrix-design-tips/

Research: Product Comparison and Pricing Tables  (Nick Finck)
http://www.nickfinck.com/blog/entry/research_product_comparison_and_pricing_tables/

Producten vergelijken is moeilijk
http://www.2c.nl/nl/over_2c/nieuwsbrief/2010-02/item4.php

Galleries, patterns, examples

http://www.welie.com/patterns/showPattern.php?patternID=comparison [done]
70+ examples (gallery)

http://konigi.com/interface/tags/comparison-tables

http://sixrevisions.com/design-showcase-inspiration/70-examples-of-product-comparison-tables-in-web-design/

http://ui-patterns.com/collections/pricing-tables/entry/4175

25 clear and beautiful
http://www.webdesigndev.com/inspiration/25-clear-and-beautiful-comparison-tables

http://www.smashingmagazine.com/2008/10/13/pricing-tables-showcase-examples-and-best-practices/

Innovation and novelty


Giving constructive design feedback and critique

August 18, 2009

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

Read http://52weeksofux.com/post/743059883/critique-me-please

How to give critique

  • Respect the design owner. Start with some positive feedback.
    affirmative criticism. Receiving a compliment delivers an endorphin rush. The presenter also hears what shouldn’t change or go away in future renditions of the work. In many ways, this is as important than knowing what needs changing. It forms a good design “root system” of that everything else can grow from.”
  • Just ask yourself these questions during your critique: What did I enjoy about this design and why? What concerns me about this design and why? What does this design remind me of and why?
  • Talk about the bigger picture/rationale. Instead of saying, “While I think those flyout menus are slick, I recommend you nuke them and put the links in the center of the page,” the critic might ask, “What alternatives did you consider for the flyout menus?”. While, in any project, practical constraints often win out, discussing the higher level concepts help the design owner (and other team members) make better decisions going forward.
  • Knowing that one day they’d also be a chosen one, the kids would be very careful about how they worded their “bads.” They’d try to be very constructive, often forming a question, such as, “Did you intend for me to see that was my card before you flipped it over? ” This gives the presenter a chance to think about what they intended to happen, versus what actually happened. 
  • “Have you considered…” is a great way to start an important criticism, since it gives the design owner a chance to say, “I did, but I chose this direction because…” Now, the team can talk about the bigger issues behind the rationale instead of nit-picking the design details.

“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.

Inspirational sources:

http://webdesign.about.com/od/authoring/a/aa100699.htm

http://10steps.sg/articles/ways-to-handle-design-criticism/ (Dealing with criticism)

http://www.zurb.com/article/369/how-to-solicit-useful-feedback (ID and Strategy)
and http://www.zurb.com/article/357/the-art-of-giving-good-feedback

http://www.smileycat.com/miaow/archives/000990.php

http://www.intute.ac.uk/cgi-bin/browse.pl?id=artifact772

http://eprints.qut.edu.au/1830/1/Teaching_Indust_design_Criticism_Seongnam.pdf

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
http://www.smashingmagazine.com/2010/03/02/web-design-criticism-a-how-to/

http://ezine.creativegroup.com/portal/site/cg-ezine/menuitem.53fc77b22e6b5c75df7326104308dfa0/?vgnextoid=1b024680cfb6b110VgnVCM1000003580fd0aRCRD


Laws of interaction design

December 30, 2008

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´.

Contents:

  • Simplicity
  • Consistency (across your own site)
  • Convention  (or consistency across the web; common web patterns)
  • Don´t make me think
  • Metaphors  (symbols, connotations and conventions within a culture)
  • Cognitive processes (attention, memory, gestalt)

Common sense

  • Make sure all your links work
  • Text should be large enough to read (by your (senior) audience on their screen set with (high)  resolution)

Above the fold

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?

Don Norman´s laws

http://en.wikipedia.org/wiki/Seven_stages_of_action

Fitt’s law

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

Hick’s law

Applies to: performance, cognitive

Users will more quickly make decisions from a list of 10 items than 2 lists of 5 items.

Gestalt principles

Proximity, similarity, etc.

Application @ http://sixrevisions.com/web_design/using-power-structure-and-gestalt-for-visual-hierarchy/

Good article @ http://www.jungleminds.nl/publicaties/artikelen/een_kwestie_van_perceptie%3A_hoe_gestalt_wetten_helpen_bij_optimalisatie_van_je_website

Links

http://psychology.about.com/od/schoolsofthought/f/gestalt_faq.htm

http://www.usabilityweb.nl/artikel.php?id=41

Visual design principles

Contrast/prominence, rhythm (ritmiek), templates (stramien)

Simplicity

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

http://www.quora.com/Product-Design-software/What-is-the-best-process-for-simplifying-a-user-interface-and-experience?hover=2

Take things away till it breaks. A few colours are enough.

Consistency

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.

Convention

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.

Don’t make me think!

Relates to simplicity, convention

What makes me think?

  • Where can I click? Can I click this?
  • Where will this link button take me? What will this button do?
  • I don’t understand this sentence
  • What happened? I didn’t expect that! Now I’m lost.
  • Should I trust them?

Match my expectations, cultural differences and norms, etnography

Attention

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.

Convention

By applying commonly used principles. For example, on Western websites, logo is top-left. Consistency: Things that look different should act different.

Memory

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

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 button/control IS the feedback  (think of a button that changes colour to indicate that what it underlying represents is in On or Off state). Compare this to a separate button where the state is shown elsewhere on the screen. NB: This is more an application of the simplicity rule of combination, but also demonstrates “Immediate display of the results of an action.”
  • “Rapid action and display”. A real-time relation between action and reaction/response.
  • Spatial response. The trigger does the action on-the-spot. For example, by clicking the monkey on the screen makes it jump, dragging it moves it. Compare this to layout out separate controls for jump and move.

The advantages are usually: the user can feel the control, predict the response,  easy to reverse the response (undo).

Related areas

User experience

  • If it is good looking (visually) it will be more usable
  • Fun, pleasure
  • Emotion, touching, triggers
  • Convincing
  • Empathy
  • Trust (not pushing/cheating)

Copywriting

  • User don’t read, they scan.
  • Scent of information:
    • Users will click the first thing they see where a ‘word association’ has been made (i.e. where the scent is strong)
    • Users will click on that looks clickable (or should be..). Ensure affordance (e.g. 3D buttons afford to be pushed) and consitency in link look and feel (underlined links recommended)

Visual design

typography
– 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)

Layout

(grid and column): Index, Work-area, Index

In essence, the global layout should take care of:

  • Where users put most of their attention
  • How the page elements, such as MiniApps, are arranged on a page so that they obey the rules for flow of control and dependencies
  • The page size and scrolling problems

Micro-layout (within a miniApp on webpage) should take care of:

  • Put like with like  [Nielsen in Prioritizing web usability]
  • Order of elements: put most used/useful first?
  • Presence of elements (“surface commonly-used features” and hide others)

Related principle: Gestalt theory

Flow of control

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)

Technical requirements: Page updates and refresh

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.

Information design: navigation and structure

Defensive design

Error prevention, adequate support/help and input forgiveness, good defaults/preferences, feedback.

Bottom line

  • A good design is like a friendly person  (empathy, kindness, humour/right tone of voice, trust,  manage expectations/don’t unpleasantly surprise me, exceed my expectations until the point that it’s almost too good to be true)
  • Don’t make me have to think – it should be intuitive and clear
  • Don’t confuse or annoy/irritate me

Further reading

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)
http://uxmag.com/design/the-psychologists-view-of-ux-design
Interaction-design.org  > Encyclopedia
http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ [2 read]

http://uxdesign.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/
http://www.ixda.org/discuss.php?post=41955 [2read]

Related posts

Interaction designer’s neccesities

Principles of interaction-design


Visual design

May 19, 2008

Aesthetics? Emotion?

Moodboards
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 debatesVisual designers need to be involved early in the research process in order to define a sound, defensible visual strategy.
http://www.cooper.com/insights/journal_of_design/articles/ending_visual_design_debates.html

 

Visual principles

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

Rhythm

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: ….

 

How Visual Design Makes for Great UX