UI UX

I would consider myself an inquisitive person, It's always been in my nature to take a moment to analyse the intricacies of how something works or what the person behind the design was trying to achieve. A lot of the time if I find the design thought provoking enough I'll come up with my own interpretation by creating something similar and that is exactly how I got into designing UI/UX (User Interface/User eXperience).

One day I was playing Wii, the home gaming console by Nintendo and I was immediately drawn to the use of 'Channels' as the primary feature of the UI design. This was the first time that I had been excited by the design of something that I've never really noticed before because up until that moment UI/UX design to me had always been subliminal.

Nintendo Wii Home Screen and Channels

On Wii, game and application Channels on the grid-like Home Screen were represented through tiles that mirrored the aspect ratio of a TV screen, alluding to the idea that the Channels were a collection of little worlds that once you click on one it would fill the screen and immerse you in its content.
To me this design proposition encouraged interaction and exploration and it expressed a level of playfulness to it that reflected the context rather appropriately. I further analysed the design of Nintendo's design and later came up with my first UI/UX design (below).



Since discovering User design I've gone on to explore many more ideas and contexts, from Gaming Products-to-Smart Device Apps. Through this exploration I've created Interfaces designed around existing products but sometimes that's not enough and I've gone on to designing products inspired by the UI/UX; such as this concept for a Smart Home Device:


The Fisher & Paykel iQo (Pron: Eye’co) Tablet is a companion device designed to remotely support compatible domestic appliances and products. Its physical design was a response to ergonomics and hands-free interaction inspired by smart devices and gaming products. The design intention behind the square touch screen, as opposed to the more traditional 4:3 or 16:9 screen ratios, was that it allowed the UI to be viewed as intended without distortion of the content no matter the orientation of the device; such as landscape and portrait images being equal in area. Additionally, a full QWERTY touch keyboard could be accessed with sufficient room for viewing the typing field. The UI was inspired by F&P’s existing branding, to tie the product in with what has already been established.
On the underside of the device is a protruding hand grip that allowed for the centre of gravity to be nearer the palm of the users hand when holding the device single handedly, thus improving the ergonomics. 
Some of the iQo’s features/benefits include: Removal of components from supported products, essentially minimising production costs. Easy updating/expansion of firmware. Direct access to live product help lines through voice or video (Built-in microphone, speakers and camera). Controlling the temperature of cooking products and setting timers and alarms. Live video streaming inside of the oven, plus IR temperature readings. Select wash cycles on the washing products. Control your Smart Home features such as security, lighting and heating/cooling.
Or use iQo as a smart remote for controlling your home entertainment system and much more. 


The devices handgrip also doubles as a stand/prop

The UI remains the same no matter the orientation, no distortion of the UI

Unlock Screen: Press Power Button to wake screen.

In the center of the screen will be a dynamic water droplet. Place a finger in the dynamic water droplet and lead the droplet by drawing a track across the screen (watch the dynamic water droplet follow) to the screen’s edge.This pattern will need to be reenacted exactly the same way each time to unlock the system. 


The Welcome Screen has a user or default image as its background. Overlaying the image is the temperature, date and time. In each corner of the screen is a button for operating four different tasks: 
Top Left Button: Settings and Options

Top Right Button: Messages (Video and Text)
Bottom Left Button: (Minimise/Maximise) Bottom Right Button: (Close) After a few seconds the overlay information will disappear to show only the background image, tap the screen to activate overlay again. 




Tap the ‘Maximise Button’ on the Welcome Screen to show the Home Screen. This is where you can access all the features of the F&P iQo in three main folders: iQo: Appliance and product interaction
iQo Meter: View data and a time line of all active appliance cycles and their energy consumption
iQo Plus: Where add-on applications can be accessed and downloaded, such as video cookbooks or shopping lists, instruction manuals, games, etc. Running apps and appliances are displayed in the seven ‘Quiq Tiles’ at the bottom of the screen. 


Home Screen with a default background

The device held single handedly

The device held with two hands

Moving forward I'd like to embrace a new trend (if that's what it is) in UI/UX design called Flat Design. So in the near future you maybe seeing my take on this new philosophy in 2D design, I may even thrown in a bit of Long Shadow for good measure.
Flat Design + Long Shadow effect


No comments:

Post a Comment