Redesigning the PS Vita UI
LABS

Redesigning the PS Vita UI

Iain

The PlayStation Vita, Sony’s world class handheld gaming console, has a UI straight from the 80s. 

main_image

Released worldwide in February 22, 2012. ‘PlayStation Vita system software’ is the rather unimaginably titled operating system used for the PS Vita.

Purely from an aesthetic perspective, the UI lacks the visual punch that would be fitting of a modern, gesture based handheld device. Comparable to operating systems devised a decade earlier, the heavy bevels, strange faux inertia effects, inconsistent layout and UI elements, and changeable icon styles all combine to make a forgettable, ugly and sometimes frustrating User Experience.

More in common with a 1990s Sony Handycam

The UI is 4 years old, and it shows with more in common with a 1990s Sony Handycam (perhaps the same team designed it?). Here I would like to explore some updates and improvements to the UI.

Problems with the current UI

The main problems with the current UI are centred around inconsistency. There is a lack of standardisation across the visuals, layout and typography, which can add up to a frustrating User Experience. Ironically, this is in stark contrast against what is essentially beautifully designed hardware. With its sleek and slick, minimalist, futurist design, the black unit looks and feels expensive with a combination of precision engineered and brushed aluminium buttons across the top and flush, responsive controllers on the front. It really feels and looks great. 

But turn the unit on and what you have is a rather immature throwback to an era where technology was being newly discovered alongside their walkmans and handycams. It’s simply one of the most obvious mismatches of modern consumer tech, made even more bewildering by the successful interpretation of good UI found on both the Playstation 3 and Playstation 4. 

What makes a good UI?

There are many factors which make up a successful UI. They can’t all be listed here. One point to note is that the PS Vista is a relatively small screen to design for, and rather than looking at the Playstation 4 interface for way’s in which to improve the Vista design, we need to look at mobile OS design. Here are three simple rules can be followed in order to create an effective UI.

Keep it simple

Keep the interface simple. Less clutter, more breathing room. Several of the screens on the PS Vita have multiple sizes, shapes and styles which makes the interface visually confusing, and hard to process and navigate. This can helped by layout consistency, which is the next rule.

Create consistency

Using common UI elements will vastly improve the usability. By standardising the design, a higher level of ‘learnability’ will be created, which will make your design more intuitive for the user. Interactions should be reduced for common tasks. Be purposeful in page layout. Navigation elements can be merged, and similar functions standardised, instead of fragmenting the UI. Your OS interactions should be predictable for the user. Overall, it should be easy to use.

Simple colour and type

Colour and typography should be used to create a strong visual system and hierarchy of content. The Vita UI does this to a certain degree, but there are multiple issues with text size, and consistency of font weights, sizes and labels. The relatively small size of the screen challenges the use of fonts to ensure they are legible without any expense to design and typography. 

Design approach

Skeuomorphic as a design approach has generally been dropped as a common practice in contemporary interface design. As flat design has taken hold, skeuomorphism has taken a back seat. Apple, who were perhaps the main endorsement for skeuomorphism, dropped this approach in 2013 with the release of iOS7. Flat design is a style of interface design without any stylistic elements that give the illusion of three dimensions, such as drop shadows, gradients or textures. The Vita uses some of these outdated design principles to confusing effect with no consistent design theme apparent throughout. 

The focus is switched to a minimalist use of typography and flat colours. Contemporary examples of flat design are Microsoft Metro, Apple iOS 8, to a lesser degree, Material Design from Google. The current UI for Vista came out before this shift in design took place. Utilising design principles for our reworking of the Vita OS isn’t one based on plagiarism, but more to do with consumer behavioural habits – users have a level of expectation when it comes to UI design. 

Visual consistency

One of the most important elements of a User Interface is visual consistency. The icons set for the vista are perhaps the area which are most in need of some love and attention. Currently the icons are bizarre, even confusing. The visual style is outdated. The Bitmaps are warped in the circle graphic to give a look of depth. The bevelled and embossed look is now seen as a parody of early web design, adding further to frustrations that none of the icons are consistent. I appreciate the Vita is a games console, but there is no excuse for such a set of inconsistent icons.

The purpose of an icon should be centred around identification – if the icon is unable to articulate its purpose without the use of text, then it has failed. Unfortunately, this is the case currently. Let’s take a look at standardising the style of these icons.

The current icons

old_icons

Redesigned icons

icons

Typography

roboto_001

The font used in the current Vita design does not appear to any of Sony’s brand guidelines, and does not appear on any other modern Sony games console. The typography throughout the OS also seems to be lacking any consistency that would be brought about by a global style guideline. The weight, styles and font treatment are inconsistent throughout. For these designs I have taken ‘Roboto’, for its modern look and feel, it’s availability (free), and its versatility in weights & styles. That said I have attempted to minimise the styles used for greater consistency.

Screen designs


Lock screen

Current design

Old psvita2

Redesign

New psvita2

One of the first thing you are likely to notice when you first use the Vita is the lock screen. The notifications list is a strange and overly colourful display of mixed information which would be more at home in a Nintendo game than the more mature platforms offered by Sony. 

The screen has to be ‘peeled away’ before you can gain access. Functionally, it is the same as any smart phone screen. This struck me as a little odd. Why would a digital device mimic a piece of paper? Conversely, it is a strangely satisfying sensation unlocking the screen, with the peel requiring a small hint of a tug before the lock screen scrolls away in a cute, revealing display of tactility. We were challenged by this rather contradictory example of skeuomorphism. 

Current design

Old psvita6

Redesign

New psvita6

I have replaced the ‘peel’ with a swipe and centred the time over a blurred background of the previous screen that was active before the device locked, This indicates to the user that by unlocking they are returning to their previous activity. I have displayed the time in the centre of the lock screen at a large weight to make better use of the space than the previous design.

 


Home screen

Current design

Old psvita3

Redesign

New psvita3

We didn’t want to make large scale changes to the user flow, instead choosing to focus our efforts on a UI redesign. Moving away from what was a rather chaotic view of unordered circular icons representing applications, we chose to represent the library with a more formalised, grid view that is closer in design to modern handheld devices. Numerical information is parked with the new iconography to provide the user with information omitted in the previous design. 

I have replaced the old, cumbersome ‘Updating’ icon in the top right hand of the interface with a much neater circle preloader. The battery icon has been redrawn, and a percentage added.

There is a clear identifier now between what are downloaded / purchased games, against system applications such as Settings and the Store. This gives the user a quick visual container against which to browse through the icons.

As an alternate design, we played around with a very Metro looking version of the home screen.

ps_vita_02_home_metro

The design is interesting, and works well, although it was abandoned at an early stage due to the rather obvious visual lean towards Microsoft’s style. Seeing the icons together in context was a worthwhile exercise in itself.

Home list

Current design

Old psvita4

Redesign

New psvita4

List pages in the redesigned UI will be simple and serve their purpose as functional, scrollable lists. The contrast and typography is improved to give a very clear presentation of options with a new alternative of providing categorisation across the bottom.

Store

Current design

Old psvita8

Redesign

New psvita8

The store has been redesigned to allow for more screen space to be made available for the browsable items. The layout has been flipped from a vertical split to a horizontal to allow for a better distribution of space. Advertisements have an allocated section on the left hand side of the screen, ideally based on similar titles to the users library and more effort has been introduced to remove bevelling, embossing and other archaic design principles to make more way for a flatter, more legible design. 

Form and keyboard

Current design

Old psvita10

Redesign

New psvita10

Introduced a new UI design for the keyboard with  greater contrast for better usability. The streamlined form design improves the general feel of the form elements, and adds elegance.

Settings

Current design

Old psvita11

Redesign

New psvita11

A simple list view is fine for the general settings page, icons for every table item is perhaps superfluous but maintains consistency and gives clear indicators for frequently used settings options, such as brightness and wifi settings. The inertia effects of the scrolling the table should be removed as they add no value to the user experience.

Notifications

Current design

Old psvita14

Redesign

New psvita14

Notifications have been streamlined and added to a fly out menu, which better suits the functionality. The ambiguous location of the previous layout and interaction was confusing for the user with many contextual options actually having no visual connection with the corresponding display, sometimes anchored awkwardly off screen. 

Conclusion

The revised screen designs offer a simplified, unified design update that follows modern design principles and really does challenge the existing design. The interface is cleaner, alongside consistent typography and a clearly defined visual language. The redesign aims to improve the UX of the PS Vita, primarily focussing on the User Interface, rather than modifying the overall functionality.

Sony’s reluctance to make any needed dramatic UI changes to the dated OS is a curious stance that can only be attributed to either apathy or some strange, strategic angle that someone as simple as I could not even fathom to understand.  

Sony’s PSP, the Vita’s predecessor, was notoriously pirated and made the console a bit of a business flop. Seeing the Vita developed and launched was a delight to see, so clearly Sony see some valuable business model in it. 

One thing’s for sure, it’s a device that is not representative of modern standards and given Apple’s stance that the iPhone is now a true gaming device, with annual iOS releases, often with dramatic, game changing properties, Sony really need to ensure they are riding this tide of bleeding edge UI design philosophies. 

  • Everton Toledo

    I hate these minimalist design, its just boring.

  • You’ve done a wonderful job. I really hope they hire you to redesign the software for them. Minmalism is the best!