Developing Wireframes for Blitz Bomb Census Website

This post summarises the development of an initial wireframe for the Stepping Into Time project. The very first user described the wireframe as , “familiar and intuitive” and provided a few points for further consideration. The wire frame that has been developed is based on the principal of parsimony – ie less is more, a notion of interaction design that was explored in my paper titled “A less is more approach to geovisualisation”  in the  International Journal of GIS. At the heart of the  design of the wire frame for the project is a simple, clear and intuitive interface that is easy to use and requires little effort to learn.

What is a Wireframe? 

Wireframes are a useful tool that enable users to explore and experience the proposed design solutions for a website and or mobile app. They are part of the varied set of tools used by User Design experts to assess how users experience a particular interaction design. A wireframe  is a diagram that highlights where  different interaction elements will be located on a web page.

There are various methods of creating wireframes:

  • Draw by hand – ie create design sketches
  • use Visio of photoshop or draw tool bars
  • Use specially designed software – see this link : 10 tools for creating wireframes

The Stepping Into Time website Wireframe – version 20! 

To develop the wireframe that we will explore with our users, is part of an iterative design process based on the user stories that are being developed as part of the User-centred design process. We started with one initial sketch and tweaked it and changed the placement and organisation of the different interaction  elements until we had an initial draft wireframe that we are happy to start testing exploring with our user group and update according to their feedback.

Here is our initial wireframe, which I have annotated to describe the motivations behind the design. (Click on the image to see the enlarged view)

The most important element of the interface is the map. Therefore, the wireframe has been designed to ensure that map takes up the majority of the window.

The search tool bar is located at the top left of the interface. In  experiments conducted by myself and Patrick Weber on the editing interface of Open Street Map,the top left of a mapping interface is the interface location where users expect to find a search bar.

I have grouped together functionality that enables the user to search and explore the data  to an area just above the map  (if there were on the map it would become to cluttered) and have key map interaction elements (Bread crumb navigation trail; map controls; map layers) discretely on the map at the top – a location that eye-tracking has shown to be easily locatable by users.

I have attempted to ensure that the interaction elements follow the F-statistic scanning pattern that has been well documented for web pages. Whilst trying to ensure that the area around the optical centre of the map remains free of interaction elements.

To develop the wireframes I used PENCIL, an open source graphical interface prototyping tool – that is nice and easy to learn. I mocked up a series of pages and then linked the various interface elements to these pages. Pencil is useful as it enables you then to save your wireframes as a simple HTML document where users can click on the elements and follow the links – therefore we end up with a very simple mock HTML proptotype.

One user’s first impressions of the Stepping into Time wireframe

Today, I thought I would explore the initial user response to the wireframe. I found a willing participant, a researcher interested in the project and walked through the HTML prototype wireframes.  The image above shows a mock up  of a few of the pages –  to give you an idea of the interaction experience.

The experience of my first user is summarised as follows :

  • Interface seems familiar
  • Keeping the header content small will be useful for users viewing the website on a 1024*768 screen (Browser display statistics)
  • Interface is intuitive
  • Explore – not sure what this is telling me. The wording does not have enough meaning and does not indicate that you can view data for different times.
  • More – if this option only reveals a couple of links then they should be made available on the interface not hidden away in a more button (requires extra clicking).
  • Linked the natural order of the interface that enabled searching by location to filtering by time
  • Legends – legends for the temporal data could be included in the layers drop down menu
  • data classification – where data information allows should be organised by bomb type not time period such as day of week.
  • What type of searches can I use? perhaps add in a user prompt to indicate what is expected ie “search for street”

More user engagement will be following shortly, to identify more interface improvements and ensure the interface is relevant . Thank you also must be extended to my very first user.

This entry was posted in User-Centred Design and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s