Interface design

This interface, practically shaking would probably be used outdoors, on a phone, in direct sunlight a lot of the time. For the interface, rather than having a two stage flow where the user would request date and then be given it, to then be disappointed by the result and have to search again. I wanted to build it such that the input and output form the system was always visible and manipulate. This way the user would be given a default and tweak the input until they had what they desired.

Axis based input mockup • David Valente

This interface follows a model of two axis to control the input. The Y controls the time defaulting to the current, and the X to the location to read tide times from on the river, closest to the user’s current location. The middle holds a dial with the height of the water currently, represented only with a high blue progress bar and no number, while the next high and low have a number. The next to occur (meaningtide going in or out) is highlighted with a box and a timer beneath. Plus a circular progress bar on the outside of the dial can communicate user determined data. In my experience, a small nag when talking about the tides would always be is the time given in BST or GMT, really important and the flow can change speed a lot in this time. Thus the inclusion.

We would also judge the speed of the current by observing floating debris in the river and chained buoys. the more it leaned the faster the flow, and the direction of lean indicated the direction flow. A really intuitive method to read the river. Thus I included this as an animated icon at the bottom of the dial. In the hope that this would translate well into interface form.

Animation mockup • David Valente

I also had a go at creating another extreme of design direction by designing one to be highly animated. This very illustrative design used animation and illustration to communicate raw data.

• The background colour communicated the time of day.
• Moon icon in the top left changes in appearance according to the moon.
• The anchor next to the location is like a pin or radio button. This is to symbol that this location is selected and anchored in place.
• The bridge illustration beneath changes according to the location. Richmond lock in the mockup above.
• The tide and thus boat rise and fall with the tide. This is supported by a tide measuring stick on the left, also indicating the bounds of high and low.
• The boat will rick if its windy, and the direction changes if its ebb (out) or flood (in) tide.
• Trash will float in the water if the tide is really high, literally representative of the river in real life as the higher tide picks up rubbish from the banks, otherwise left behind.
• The speed of the fish swimming at the bottom correlates to the speed of the current.

I made this mockup to create extremes of an interface design to then take the working ideas from and abstract don to something more reasonable and useful.

Next post ›



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