RSS
 

Archive for March, 2010

Justinmind Prototyper

23 Mar

It was build to help create interactive prototyping tools and allows you to define actions simply by selecting the object and applying an action to it. You also have the ability to create variables which can be interesting for development point of view.
Two key features that made me use this software more than once is the ruler with pixel units and the grid which are fundamental for anyone wireframing a website or application and some simply don’t understand the importance of pixel units. Even tough on JustinMind Prototyper the ruler only shows units from 50 to 50 pixels (0, 50, 100, 150, etc).

If you are looking to take your project beyond wireframing you might like to create fluxograms with the Scenario tool, comment on your project and define the requirements which help creating the project documentation.

It’s a very complete, useful and functional tool but there are too aspects I must refer to and hopefully JustinMind Prototyper developers will implement this in the future:

  1. Importing new widgets or stencils. One thing that makes OmniGraffle so grate is the possibility to use stencils created by others. This can make the difference for very boring wireframes to sexy wireframes. For what I’ve tested you can create your own widgets as long as they are in image format. In wireframes presentation is 80% of captivating your client.
  2. Fluid workspace. I am forced to work on the reduced canvas area while wireframing. I should be able to put that window on a different monitor.

Link: Justinmind Prototyper

 
1 Comment

Posted in Tools

 

The Gutenberg Diagram in Web Design

07 Mar

The Gutenberg rule points out a user behavior called reading gravity which is the western habit of reading left-to-right, top-to-bottom. It can be represented as a simple diagram that splits a page in four quadrants:

Gutenberg Diagram

  1. A Primary Optical Area
  2. a strong follow area
  3. a weak follow area
  4. and a Terminal Area

The higher left portion of the page is the user primary focus, it’s where the eyes will automatically focus regardless if the user is searching for something, wanting to read or just doing a quick scan on the page.

The second stage of the reading habit is moving to the higher right portion of the page, you can think of it as a follow up from the left portion but less important. It’s not a good idea to break the reader’s experience created from the starting point. Meaning that if you have a call to action the user will stop at this point and act.

The lower left portion is the blind portion of the Gutenberg diagram, although readable the user will not give much importance to content in this area of the page.

When the user reaches the lower right portion of the page there is a break in the reading / page scan process and the user will need to take an action. This is the perfect spot to insert call-2-action such as buttons, links, forms, video, etc.

By understanding the reading patterns of the users who visit your website you are able to place the most important content in the areas where they will be most effective.

If you’ve read about web users reading patterns you probably read Jacob Nielsen’s report on the F-Shaped Pattern that shows the lower right area as the less important area. I wouldn’t say this theory is wrong but consider the F-Shaped pattern for users that are scanning the page and the Gutenberg Diagram for user that are reading or genuinely interested in the content.

F-Shaped Pattern

For example, a user is searching for information about the Gutenberg Diagram and reaches this article. The user will look at the diagram image and read the lines above the image starting an inverted Gutenberg Diagram.
If the user is looking to buy a product on E-bay I believe the primary pattern on the product listing pages will be a typical Gutenberg Diagram.

On the other hand when a user is searching for information on a search engine and finds multiple articles about it, the user will engage an F-shaped pattern when visiting those pages trying to find quick and concrete references to it’s search.

Complementary readings:

 
1 Comment

Posted in Web Design

 
 

Page optimized by WP Minify WordPress Plugin