Posts Tagged ‘webDesign’

Why White Space Is Crucial To UX Design

February 14, 2017

White space can be broken down into four elements:

  • visual white space (space surrounding graphics, icons, and images);
  • layout white space (margins, paddings, and gutters);
  • text white space (spacing between lines and spacing between letters); and
  • content white space (space separating columns of text).

Jerry Cao and Kamil Zieba and Matt Ellis

Page load and attention span

May 9, 2016

With each second that passes while a page loads, fewer users stick around. In fact, 47% of users expect a Web page to load within two seconds. If a page hasn’t loaded within three seconds, 57% of users will leave the site. This is a consequence of human psychology: We have an eight-second attention span. (That’s shorter than the attention span of a goldfish.)

Jacqueline Kyo Thomas

 

Parallax scrolling

May 9, 2016

“In the age-old debate between beauty and function, parallax scrolling wins the beauty pageant, but fails miserably in terms of function.”

Parallax Scrolling: Attention Getter or Headache? by Jacqueline Kyo Thomas

Responsive Web Design

February 28, 2012

Responsive Web design is a combination of fluid grids and images with media queries to change layout based on the size of a device viewport. It uses feature detection (mostly on the client) to determine available device capabilities and adapt accordingly. With responsive Web design one code-base, deployment, and URL provides you with access to many devices including future ones you haven’t encountered yet. But optimizing images, video, third party widgets and more using client-only solutions can be challenging.

Luke Wroblewski

Responsive Web Design

August 31, 2011

At its core, Responsive Web Design is about serving the same HTML to every device and adapting its presentation (mostly through CSS) based on the specific capabilities of the device being used to access it.

Luke Wroblewski: Why Separate Mobile & Desktop Web Pages?

Links

May 5, 2011

Use links meaningfully:

  • Deliver users to their desired objective.
  • Give them links that communicate scent in a meaningful way (e.g. with meaningful trigger words)
  • Make the real estate reflect the user’s desires.

‘A more accurate name for the search box would be B.Y.O.L.: Bring Your Own Link. What do people type into this box: trigger words! … The key thing to understand is that people don’t want to search. There’s a myth that some people prefer to search. It’s the design of the site that forces them to search. The failure rate for search is 70%.’

Essence of a talk given by Jared Spool on ‘An event apart’, Boston MA, 2011
From Jeremy Keith’s notes

BBC News site redesign

July 19, 2010

Mother BBC has launched its redesigned News site a few days ago. I want to actually use the site on a day-to-day basis before I express my user opinion. So no comment yet.

I’m however interested in ‘The-making-of’. Paul Sissons, the creative director of this project, explains. His view on the site’s redesign appears rather presumptuous to me. It sounds a biit like ‘You may not realise or not even appreciate it, but rest assured: we spent your money doing the right thing’. And indeed, there are some interesting design considerations, like the new homepage template that allows controlling the ‘volume’ of a topic or story. In other instances, the BBC appears to adapt standards that other news sites already have put into practice a while ago, such as horizontal top navigation, bold typo, and vertical depth (prime example for this site style is the Swedish newspaper Dagens Nyheter).

Some nuggets:

‘The gradients and textures of “Web 2.0” are gone, and everything is pared down to the minimum required for delivering news.’

‘With an incentive, users will scroll. If that proves a positive interaction, it’s something that could become habitual. So rather than design our indexes and front page with everything at the top of the page, we are encouraging scrolling by putting richer content within stories and towards the bottom.’

‘With Top Stories prominently visible to every user, we allow for more sideways navigation. People won’t have to click back and forth from Front Page to story in order to read the stories of the day.’

Kurt Schwitters: Gesetze der Bildform

May 15, 2010

Visiting the exhibition Van Doesburg and the International Avant-Garde at the Tate Modern, I was struck to see something like a website wireframe in a small book from 1930, ‘Gesetze der Bildform’, by the modernist artist Kurt Schwitters.

Kurt Schwitters: Gesetze der Bildform

Kurt Schwitters: Gesetze der Bildform, 1930

On these two pages he compares / contrasts orientation with advertising.

Orientation / Advertising … (Orientierung / Werbung)

  1. Static / Dynamic … (Ruhend / Bewegt )
  2. No center, balanced, hence stable / Distinct center, hence radiating … (Ohne Mitte, daher ausgeglichen / Betonte Mitte, daher austrahlend)
  3. Passiv / Aktive … (Passiv / aktiv)
  4. Objektiv / Subjective … (Objektiv / Subjectiv)
  5. Vertical, horizontal, rectangular forms / Parallel, any shape … (Senkrecht, waagerecht, Vierecke / Parallel oder schraeg, jede beliebige Form)
  6. Parts of the same type; the negative of each part is essentially the same as its positive / Parts of different types. Negative and positive are essentially different, like conkave and convex … (Teile gleichartig; das Negativ jedes Teiles ist im Wesen gleich seinem positiv / Teile verschiedenartig; Negativ und Positiv sind wesentlich verschieden, wie konkav und konvex)
  7. hence – providing orientation / hence – advertising, aggressive … (also – orientierend / also – werbend, aggressiv)

Rule of Thirds

April 16, 2010

The rule of thirds (aka Golden Ratio, going back to what is known in mathematics and architecture as Phi) is a common guideline in photography. It states that if you divide a panel (screen) into thirds, horizontollay and vertically, thereby creating nine equal parts, the viewer’s attention will fall on objects placed near the line’s four points of intersection.

Anthony T. Holdener (2008) Ajax: The Definitive Guide, Sebastopol: O’Really

User centred design: consistent, predictable, controllable

June 12, 2008
  1. Consistent designs use orderly layouts that align labels and group related items. They include appropriate color-coding to show relationships among components, provide warnings where needed, and highlight special cases. Consistent designs stick with meaningful terminology and present understandable sequences of InstructIons. Consistency is often invisible, because keeping the corporate logo in the upper left-hand corner or using the same color scheme seems natural. Only when the logo jumps to the right or the colors change do you notice.
  2. Predictable designs enable you to gain familiarity and confidence in using your computers because you have a clear model of what will happen after each selection. You expect, after putting a book in an electronic shopping cart, that you can remove it or return to it a week later. Predictable designs apply meaningful metaphors, such as a shopping basket or e-mail in-box, and familiar conventions, such as the use of Save, Print, Open, and Close.
  3. Controllable interfaces give you the power to do what you want. You can combine a photo with text to make a wedding invitation or copy part of a spreadsheet into an e-mail document. When you change your mind, you can revert to a previous version of your invitation or reformat the spreadsheet to provide input for a simulation program. Controllable interfaces are adaptable by users so that they can customize their screens and avoid unneeded features.”

From: Shneiderman, B. (2002), Leonardo’s Laptop: Human Needs and the New Computing Technologies, Cambridge, MA: MIT Press, p. 64-5