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.

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

image_preview-35.png
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.

image_preview-36.png
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.

image_preview-37.png
Screenshot of final interface 2 • David Valente

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

image_preview-38.png
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.

image_preview-39.png
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.

image_preview-40.png
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.

image_preview-41.png
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:

WordPress.com Logo

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

Google photo

You are commenting using your Google 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