Finishing touches

At the V&A shop I came across the The Oarsman’s and Angler’s Map of the River Thames. On this straight ribbon is projected the river Thames preserving the meanders wile compressing its longitudinal distance to something more usable on a rectangular scrolling interface.

Photograph of The Oarsman’s and Angler’s Map of the River Thames • David Valente

If we decide to not abstract points on the river down to a series of radio buttons, we can use this map to show he river in detail at large scale on screen.

Applying map on screen • David Valente

Following a mockup and style guide, we put together the beginnings of the final interface. Anything that is actionable is highlighted in a consistent pink accent. The semi-circle button shape is an abstraction of a boat hull. The river is abstracted to a series of buttons representative of an abstracted transport map. On desktop clocking on any of the date and time options then allows the user to change the option with arrow keys.

Screenshot of final interface 1 • David Valente

The two dials on the right indicate the next high and low tides. Unfinished as of current, the one that is next is larger in size. I have brought back the buoy model. It sways over to one side to indicate a strong current, however, as you can see it’s not too obvious thus the supporting text.

Screenshot of final interface 2 • David Valente

At this stage we wanted a more usable time and date selections.

Changing data input mockup • David Valente

This idea above works by the user selecting a month button that then expands horizontally to display the next few months.

Screenshot of final interface 3 • David Valente

The next change was moving the next high and low tides to a panel on the left. This is joined by an indicator for the current sunrise and sunset times. The reason being this makes for a more saleable system. This panel can then support an ever increasing number of widgets in accordance to the user’s preference.

Screenshot of final interface scaleable system • David Valente

Much like the tube map the, selection of the location can grow to support more linear locations up and downstream in addition to tributaries on other rivers. We removed the ear buttons either side of the location in favour of just a radio button model, for fewer interactions for the same data and a more readable interface.

Screenshot of final interface 5 • David Valente

Project available here

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