Mocking up a site from wireframes

The process of 'fleshing out' the CPP website from the wireframes into mockups revealed a number of issues that were not clearly apparent when developing the wireframes themselves.

The wireframe:

The following shows a developmental procession of the CPPAP site as the mockups progressed.

The first mockup which was developed from the wireframe as it stood:

The main image wastes far too much real estate with no real benefit to the user. The login is uninviting and cold and the search feature appears as an after thought.

So a second draft progresses:

The second draft gets rid of the large central image and replaces it with a series of promotional images that illustrate some of CPP's major clients, such as QANTAS, the AFP, the RAAF and other corporations. These are to be  an animated slideshow rather than static images.

The search feature is now better placed as part of the navigation array.

However, the login, while better than the first draft, is still cold and uninviting with a more or less generic look about it. The IP Look-up is revealed with a flag with a fairly superfluous note beside it.

So, a third draft:

So... A new look. The 'having problems' links are removed. If the site detects that the user is having trouble, it can 'offer' assistance depending on the issue (like customised error pages, the site can address the problems specifically). Account management now appears afterthe user has logged in. It replaces the now superfluous 'create an account' component.  a personalised note to welcome the user back in now appears after login.

A small 'information' button on the login panel is now in position at the top right, where the user can find more information about the reasons for logging in (if they are interested). The flag is represents the IP lookup, so the site can deliver region relative content, with the shopping feature working in local currency. If the user clicks on the button, they can change the location (if the IP Lookup gets it wrong).

The final image shows the shopping basket as a small floating panel that is accessible by the user from any page. This allows the user to move around and browse the site after having made initial purchases, similar to walking around a large store.

Clearly, the wireframe will need to be revisited to reflect the progression!

Site Map – Revised

In an attempt to clarify and simplify the user experience, the site map has become a bit more involved, as development continues.

This map uses Jesse James Garrett's 'Visual Vocabulary', which further clarifies and outlines the processes and relationships between the various elements (http://www.jjg.net/ia/visvocab/).

Click the image to enlarge.

Mapping

The aim is to simplify the CPP Asia Pacific Website to make the USER EXPERIENCE a simpler, easier and more enjoyable experience.


A challenge with this site is that there is a legal requirement to ensure that certain products (and even some services) are only available to qualified people. So there is a requirement for quite a lot of legal information, terms and conditions etc. to be presented. 


While the legals are a requirement, it is doubtful that anyone will fully read it. It's therefore proposed that a typical 'I agree' to the terms and conditions with a link to them if so desire, rather than forcing someone to read literally pages of legal jargon. 


There are interactive recruitment tests, with results that would need to be emailed to the client using the site (as the candidate never sees these). 
The site as it exists at present:

The user is presently required to wade through multiple static pages, following sometimes quite minor links to arrive at what is actually a major component of the site. With many pop-up pages and 'dead-ends' a user is likely to become lost and either click the 'Home' button to attempt to re navigate through the site, or simply leave the site altogether!


The new architecture proposed, while simplifying the experience for the user, does not in fact remove information, but rather consolidates much of the superfluous text into a resources section of the site. This allows for the user to read the extensive information if they choose.

Note that the Recruitment and Personal Development sections don't require the payment gateway, as the client is billed to their account now.

By reducing the number of links and using more dynamic pages, the site now reduces the previously complex path the user was required to take and allows the site to present only pertinent information to the user. While the programming required may become more complex, the user's experience becomes easier and more aligned to their needs.

Form & Function

The following is nothing more than a 'thinking aloud' process that I am throwing out there. No doubt, it will be all covered in the course (indeed, a lot already has), but I found a site that states UX is the overlap between form and function and wanted to comment.

That design of a website needs to go beyond just the graphic look of the pages presented is well accepted. Sites need to be smooth and fast, with a clear concise code that ensures that the whole process works as expected every time.

Form and function balanced together encompass the whole usability of a site, contributing to the overall experience.

(Idler, 2012).

Sabina Idler, of Usabilla, suggests that function can be summed up as the 'Usability' of the site (Idler, 2012). If we look at a definition of usability, It can be seen that a key point is usefulness:

'Usability includes methods of measuring usability, such as Needs analysis and the study of the principles behind an object's perceived efficiency or elegance. In human-computer interaction and computer science, usability studies the elegance and clarity with which the interaction with a computer program or a web site (web usability) is designed. Usability differs from user satisfaction insofar as the former also embraces usefulness'

(Wikipedia, 2012)

So if a site is incredibly beautiful (Form), but ultimately too hard to navigate, it can be seen that the Form is out of balance with the Function. The UX suffers. Conversely, a site that is very easy to navigate, but is incredibly ugly may fail to engage the user. Again, UX suffers.

The 'Form' of the site is broadly the look of the design. However, it goes a lot further than that, as the form also encompasses the feel of a site. To extrapolate, the form of the site is  visceral and emotive.

As emotive responses to certain stimuli and imagery can be affected by cultural, personal, educational, religious and any other variety of demographic influences, it poses the question;

Does UX design also rely on an inevitable degree of unpredictability; the user? I am therefore asking (anyone who wants to comment), shouldn't UX design consider a 3rd balance point as equally important?

Idler states;

'Design is very emotional, which often keeps designers from being rational about something they have created themselves.'

I'm suggesting that care needs to be taken to ensure that the form, function and the user are considered in a balanced fashion.

References

Idler, S, 2012, Usabilla, Form & Function Go Hand-in-hand, [online] http://blog.usabilla.com/form-and-function-go-hand-in-hand/ [accessed 3Apr12]

Wikipedia, 2012, Usability, [online] http://en.wikipedia.org/wiki/Usability [accessed, 3Apr12]

LA 2.1 – Personas

Personas are documents that describe typical target user. They can be useful to your project team, stakeholders and clients. With appropriate research and descriptions, personas can paint a very clear picture of who is using the site or application and potentially even how they are using it.

(Unger & Chandler, 2009)

Max Garner

54 Year old Organisational Psychologist working in Melbourne.

Max Garner, BSc, MSc, Med PhD, is eminently qualified with over 20 years experience working as an Organisational Psychologist. Now working as a Director for a large Melbourne based consultancy, Max is also the author of many respected books on corporate team building. Max lectures twice a week at Melbourne University on Item Response Theory, which he believes is a more accurate method of computerised psychometric testing.

However, Max came to computing late in life and so is not particularly computer literate himself. He is extremely conservative and reluctant to adopt the latest that technology has to offer, despite owning the latest model iPhone and iPad. He prefers to use Microsoft Windows XP, although he has never used any other operating system. While he enjoys the easy-to-use interface of his iPhone, the iPad is yet to be unpacked from its box!

He likes to further his already extensive knowledge of his field with text-books, rather than ‘waste his time’ with fiction or television. While he reads extensively, he prefers books to websites.

Max has been married to his wife, Rebecca for 20 years and has two young adult sons who are both at university, Jonathon and Lachlan. Jonathon is studying Medicine, while Lachlan is following his father into psychology.

Max plays competition tennis every Thursday night with four long-term friends. This is his only sporting activity other than irregular visits to the gym.

More about Max

Economic status: Max earns a considerably above average income and so lives in comfort, holidaying overseas each year.

Personal Computer: Microsoft Windows XP, with Microsoft Office.

Mobile Phone: Max uses an iPhone for its convenience and ease of use. He is not particularly interested in the many features of the phone, believing it to be a device for talking to others.

Social Networking: Max has a Facebook page, set up for him by his youngest son, Lachlan. He has never understood the point of social networking and does not use it.

Television: Max rarely watches television unless a particularly pertinent documentary is being broadcast.

Magazines: Max subscribes to InPsych magazine, but does not regularly find the time to read the entire publication.

Aspirations: Max claims to be planning to retire within five years. His wife and sons dispute that he will ever really retire.

•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

Charlotte Whiting

44 year old Clinical Psychologist

Charlotte runs her own psychological self-help practice in Wellington, New Zealand. She is focussed on helping others to attain a better understanding of their capabilities by examining themselves. Although Charlotte holds a Master’s Degree with first class honours in phsychology, she is now a practicing Buddhist and has shunned the corporate world in favour of attaining enlightenment for herself and her clients.

While Charlotte appears to have discarded much of her previously held material wealth, she continues to live relatively comfortably and is quite computer literate. She uses her current model Mac Book Pro, running OSX 10.7.3 to connect wirelessly to her high-speed broadband connection. Charlotte configured her WLAN entirely by herself and has no problems understanding new and emerging technology.

Charlotte is an avid user of Facebook, Twitter and Linkedin and spends hours online researching Eastern spirituality as well as remaining up to date with developments in psychology, both online and using her extensive personal library.

Charlotte lives with her long time partner, Catherine who has one teenaged daughter from a previous, failed relationship. She has three cats, Moe, Larry, and Curly who she treats as her surrogate children. Catherine barely tolerates the cats, but adores Charlotte.

When not working or researching spirituality, Charlotte practices yoga and meditates in Botanic Gardens, near her home. She also occasionally attends short course at Victoria University.

More about Charlotte

Economic status: Charlotte earns a comfortable income and so is reasonably well off. Her partner, Catherine works as primary school teacher and so also contributes to their family income.

Personal Computer: Current Mac Book Pro. Charlotte is an avid fan of all Apple products and also has an iPhone and iPad. She is quite computer literate and rarely requires the help of any IT specialists.

Mobile Phone: Charlotte uses her iPhone to it’s fullest potential, relying heavily on the calendar feature to keep her appointments.

Social Networking: Charlotte is a regular user of Facebook, Twitter and Linkedin, which she uses to keep in touch with friends and for networking.

Television: Charlotte does not watch television, preferring to spend her spare time communicating with friends.

Magazines: Charlotee does not subscribe to any magazines, but does occasionally buy and read them on an ad hoc basis.

Aspirations: Charlotte’s life is somewhat chaotic and as such lives her life day to day. She claims to seek enlightenment, but does not follow any strict plan for her life.




Reference

Unger R. & Chandler C., 2009, A Project Guide to UX Design for User Experience Designers in the Field or in the Making, New Riders, an imprint of Peachpit Press, USA, ISBN: 10 0 321 60737 6 

LA 1.4 – Telstra T-Box Technology

The Telstra T-Box is based around a N8000 Series NetBox built by the French IPTV specialist Netgem. The T-Box includes two digital TV tuners and a 320GB hard disk for high definition video recording as well as network connectivity compatible with Wi-Fi 802.11n.

The basic operating system for the device is Linux supporting Apache websever software, which in turn supports Javascript, allowing for the smooth delivery of dynamic content. The interface is a proprietary browser, written by Netgem for the NetBox and T-Box.

The Linux OS combined with Sun Microsystem’s Apache webserver is recognised as one of the world’s most stable platforms. Indeed, the open source Apache webserver represents a massive 59% (compared to just 22% for Microsoft’s web server IIS) of the world’s web servers

(Tech Tips, 2012).

The use of Apache and Javascript allows for constant expandability and the flexibility of supporting most web based applications, including: 

• HTML 4.01
• JavaScript 1.5
• CSS1&2
• DOM1/2 Events IGMP
• HTTP1.1
• SSL 2&3
• RTP/RTSP
• SNMP
• HCP
• VOD & Web TV: RTSP, Progressive download, Apple HTTP Live streaming, Microsoft Smooth streaming.

(Netgem, 2011)

Additionally, as the device supports web-based applications, content can be streamed directly from Telstra’s Media division, as well as other third-party services such as YouTube.

While the T-Box uses the High-bandwidth Digital Content Protection (HDCP) standard to combat piracy, it allows the user to record standard and high-definition free to air broadcasts directly to the T-Box’s hard disk.

References

Tech Tips Website, 2011, http://techtips.salon.com/secure-microsoft-iis-server-apache-server-1575.html

Netgem Data sheet, 2011, Hybrid STB & MediaCenterN8200, available online from Netgem: http://www.netgem.com/

Netgem Data sheet, 2011, Middleware, available online from Netgem: http://www.netgem.com/

LA 1 – The Telstra T-Box Design

This review will compare the Telstra T-Box to that of the Apple TV device, as it appears that the T-Box is an attempt to replicate the successes of Apple.

First Impressions

Aesthetically, the Telstra T-Box looks and feels cheap and poorly constructed. The semi rigid black plastic casing completely fails to reflect the $299 price of the device. The Apple TV device ($129), which conversely (like most Apple products) has a solid and well constructed feel, which conveys an air of quality that the Telstra machine lacks.

Clearly influenced by AppleTV

Smaller with much better build quality

The T-Box measures 200mm x 200m x 40mm, yet feels to be a largely empty case, while the Apple TV case is small and compact (98mm x 98mm x 23mm). The front of the T-Box has a single USB port, while the back, features aerial connections, HDMI, S-VIDEO, Digital Audio, RCA and Ethernet should the wireless interface prove to be insufficient.

While Apple TV features the now well known Apple icon embossed on the top of the device, the T-Box has a slightly awry, small Telstra ‘T’ icon screen printed on the front. The T-Box branding is extremely poor.

So before installation, the overall design of the T-Box fails to engage the user or convey any confidence in build quality.

Installation

While user installation of the T-Box presupposes a reasonable level of computer literacy, plugging the various cables into a television is relatively simple. Despite this, the only documentation relating to installation, covers plugging in the few cords that ship with the device. There is no manual supplied at all. The user is left to assume (hope?) that the device itself is preloaded with online manuals, tutorials or wizards. In terms of communication design, it is difficult to appraise this component as it is totally absent! In fact, there is no tutorial nor manuals loaded onto the T-Box.

Connecting the device to a broadband connection is possibly the most difficult aspect of the T-Box. As mentioned in an earlier post, the device is simple enough to connect to wireless gateway, providing that the user has a basic understanding of HTTP and WLAN. Configuring the device to log into a network with more than one router is not as straight forward and will result in a lot of ‘Google searching’ for third party instructions.

Documentation

Possibly the biggest failing of the Telstra T-Box, is the almost complete lack of readily available documentation about the device.

Online searches reveal a number of blogs and forums that explain features and offer solutions to various problems, but Telstra itself appear to be focused solely on sales of the device.

However, a reasonably comprehensive, 62 page user manual for the T-Box does exist and is available as a PDF download from Telstra (http://www.telstra.com.au/tv/download/document/tbox-user-guide.pdf). That this manual is not easily found or preloaded onto the T-Box can only be described as extremely poor.

Additionally, there are a series of instructional videos available to aid the user in setting up WLAN connections (http://www.telstra.com.au/tv/tbox/setting-up-tbox/). While these will help most users, any deviation from the standard Telstra supplied gateway may cause problems.

Calls to Telstra will connect the user with much sales advice, but are unlikely to result in any technical solutions. Indeed Telstra staff appear to be unaware that user manuals or any documentation even exists. While this may be somewhat acceptable from sales staff, the absence of any technical advisors is not.

Foxtel

Foxtel, Telstra’s pay-television channels are also available via the T-Box. These extra channels can are available to subscribers, allowing users to view Comedy, The Discovery channel, Sports and additional movies, while Nickelodeon and the Disney channels are available for children.

Subscribing to Foxtel through the T-Box itself is relatively easy, with the onscreen TV guide including Foxtel channel information whether the user is subscribed or not. While this feature may have been intended to advertise the pay television channels, it in fact only illustrates the poor selection of programs available through the service. Indeed, being able to view what would be available through subscribing only reinforces the decision to avoid Foxtel altogether!

The Interface

Although the external casing of the T-Box suggests otherwise, the onscreen performance of the device is quite good. While the interface itself is clearly inspired by Apple TV, the design and layout of the screens is relatively clear and easy to navigate. There did appear to be a few too many ‘layers’ of screens, but it is not easy to become ‘lost’ while navigating through the various features. The screens are well designed and pleasantly coloured. Consideration also appears to have been given to the fact that the screens may be accessed in darkened rooms, where bright colours would be unpleasant to navigate.

Apple's icon driven menu extends across all their devices

Influenced by Apple. Bigpond Movies is one of the few instances of onscreen branding

The screens themselves are clearly labeled and use simple language where necessary. While Apple TV nor the T-Box used any discernible onscreen branding, Apple used icons that are clearly identifiable from their other devices. The Telstra device tends to overuse the word ‘My’, as in ‘My recordings’, ‘My movies’ etc, while simple one word titles would have sufficed. The personalising language comes across as somewhat forced (similar to Microsoft Windows).

Clear and easy to navigate TV guide allowing the user to record with a single click

To exploit all the features of the T-Box, a good connection to a reasonably high speed broadband connection is required. In addition to functioning as a digital receiver for older analogue televisions, the device offers a gateway to exclusive Telstra television and music channels, as well as offering the ability to download and view programs from Telstra’s fairly extensive online library. With a 320GB Hard Drive, up to 30 hours of HD recorded content (100 hours of SD) is achievable.

Once configured, the T-Box is an enjoyable device to use with clear easily navigable screens that become easier to use with time and experience of the device.

While many of the device features tend to be discovered during use rather than found in non-existent documentation, the capabilities of the T-Box are significant. The ability to record an entire season of a series with a single click of a button or record a program on one channel while watching another make owning a T-Box an overall enjoyable experience.

Summary

So, while the actual device has a look and feel of inferior quality, the T-Box has a very clear interface, with some good UX design. That the device is used and navigated by so many users without any documentation at all reflects on how much communication/graphic design contributes to the overall user experience.