Well Designed Windows Phone 7 Apps

So when the new WP7 phones came out and Microsoft provided the Windows Phone Style Guide it looked as if all the apps would be pretty samey and bland.

However I've seen some pretty cool apps and one that is being 'bigged up' all over the Internet is the Cocktail App so I downloaded a preview to check it out for myself.  The great thing about this app is firstly it's aesthetically pleasing, it's very evident that a lot of work has been put into the graphics and none of it is tacky at all.

The other thing I liked was once u open up the app you get the core features in a minimalistic way but with enough information to play and explore within the app rather than being bombarded with cluttered information.

Forced Registration

I hate it when websites make you register before you can download their software even though it's OPEN SOURCE and FREE!

Nice Design - Gallery

A colleague of mine keeps a collection of screen shots of designs he thinks are nice/visually appealing/good. I thought I would start something similar.

This is a coffee website (bean about town) that was shown to me by the owner of Espresso Emporium for whom I am doing some free design work.

Visually it's very appealing, has a retro look. The page loads with an animation, which is fine however there doesn't seem to be the option to turn off the animation unless you click on one of the menu options.

It is very  nice looking though.

Paths and Complexities

I am currently working on a project where we have to replicate the system in it's entirety into a newly defined architecture. Last week I was asked to work on a particular feature, having gone through this feature on the existing system I found it to be horrendous and I am not looking forward to replicating it.

Without going into too much detail, my biggest qualm is that it's very confusing, and as a developer I found it difficult to navigate round so how is an end user supposed to be able to. I get the 'they will learn/adjust' argument but from a usability and user experience perspective that's just not good enough.

Whatever happened to simplicity and elegance? I know the 3 click rule is seen as a bit of a UX myth but in this instance, I think it would be quite effective!

Prevent feature-creep by focusing on users' goals

I like this article, it's a very good read :)

User Experience for Developers

I have been banging on about users being savvied up on UX and Usability for years now. I am a firm believer that as a developer you should have at least some basic knowledge/experience in this area.
This article sums those points up nicely.

I also like this bit:  "But sometimes you just need to cut the middleman and talk directly to the source" and I think Agile takes care of a lot of that.

Interesting Usability Links

The first one is about User Expectations with Mobile Apps.
The second is about Accessibility First - for a Better User Experience

Amazon MP3

Last Thursday, Nina and I were looking for music for our Playing with Justice Concert. After determining the set list, we decided to purchase them from the Amazon MP3 website. This is by far the worst place I have ever purchased music.

Firstly, the download failed. Ok no big deal, that kind of stuff happens all the time. Was there an option to re-download though? No! After spending ages searching to re-find the download option, we had to contact the Amazon customer services, who then 'reactivated' the link. Tried a second time, download fails again, re-download link no longer available. Contacted them the third time, this time only 2 out of the 8 songs purchased downloaded and the link once again de-activated.

At this point, I decided to give up and download from iTunes. This is a major flaw in their system design as it does not count for download failure. There is no mechanism in place that allows you to track whether the download was successful or not (not even their player) and therefore ensuring the download link is not disabled.

This is such a waste of Oxfam money and I won't be using their store again. I'll stick to iTunes :)

Natural Balance Foods Website

As I'm on a bit of a health food obsession at the moment, I went onto the Natural Balance Foods website and presented with the website I think overall it is pretty good. The background image doesn't interfere with the text or the information. The menus and options are clear and the user experience is generally good as you are able to find all the information you need:

I only have 2 qualms with the website. The first is that it takes forever to place the order, sending information back is such a slow process. The second is the inconsitency of the field layout for the start date and expiry date of the credit card details (as shown below):

This really threw me. Other than those 2 issues I quite like the web site :) 

MGMT Website

As fantastic as MGMT are as a band, and it's a pretty cool idea trying to engage their fans into designing their website. There are some really cool pictures and art work people have come up with, however this isn't very practical and from a usabilty perspective is very poor!

You visit the home page and are presented with the following page:

 Although the image isn't too bad, it's still fairly noisy and makes text difficult to read, especially when you are looking at events (which has the same background) for concert dates. As this is the most important aspect of a band's site, the information should not be difficult to read.

You move away to the 'Music' part of the website, and boy is this an eye sore. You would probably get eye strain from trying to read what's on there and the whole fan art aspect of it means that the site is inconsistent.

If you then move on to the 'fan art' section you are presented with a gallery of art people have uploaded, by selecting you can change the backdrop....great....however there is no option (or easy way if there is an option) of turning off the fan art element of the site.

Yes it's a nice concept but it makes for a very poor user experience.

Mental Models

A colleague of mine was in a bit of a predicament earlier and asked for my opinion on mental models. He is currently in the process of designing screens for our project and wanted to know whether he should a) go with his belief that positive action button should be on the right and the negative/neutral on the left (like Apple's dialogs) or b) follow the Windows convention of positive on the left and negative on the right (ok and cancel buttons).

Like many of us he has a fundamental belief that the Windows model is wrong. As much as I wanted to advise to use the 'correct' approach the problem with this is that the majority of users are Windows users and yes people can unlearn and re-train but when we are dealing with a client who may be adverse to such matters it is best to provide them with a screen that depicts *their* mental model as opposed to the correct mental model.

The best approach by far, in this matter would be to mock up both versions and get them to pick so that the onus and ownership belongs to them rather than us. However, this may not be possible with the time constraints. The impression that he has given me is that he is likely to bit the bullet on this particular issue and go with the Windows approach! 

Another STS PITA

So here's another problem that took ages to sort out. If the XSD you are using in your project is referencing other XSDs on a server and in your network connection settings you have not bypassed the proxy for that server thn instead of STS informing you of this it does this instead (for ages):

There is no useful warning message or error or time out message. Although the issue itself was not with STS it is still a big usability fail! 

i-Design 09 Conference

The Conference

I attended my first conference yesterday. The i-Design 09 conference in London (pictures: here).

I really enjoyed it. It was at an excellent venue too, the old cinema at Westminster University (the first cinema in the UK). There were some really interesting speakers also. My favourite speaker was Bill Thompson. He was coherent and funny and made a lot of good points. I also thought Tim Milne was good too but that could have been because he was also cute (for an old bloke) ;-)

The first half of the conference was focussed around the web, content and so forth. There were publishing companies, marketing companies there and various others. The message given was that we need to embrace the technological revolution.

One of the points that Tim Milne made was that back in the day (way before my time) when Coronation Street was on terrestrial televison there was a much more connected and bonded feeling as you were part of something that everyone was doing at the same time. I disagreed with this point, as to me that is a form of control. You *have* to watch a programme at a prescribed time because if you miss it then you won't get the opportunity to do so. The invention of VHS probably revolutionised the creating a *you* focussed technological experience.

Other then that, the rest of the morning was interesting and pretty much on par with the technovision stuff at work in terms of ideas and concepts.

Another thing that struck me was that Bill Thompson mentioned integrating people and technology. He mentioned the development of a contact lens which displays information on your retina. During our HCI Project back in 2006 we came up with a similar idea (but for glasses instead of lenses) but this was parked after iterating through a UCD process based on user feedback.

The afternoon was pretty good too, mostly focussed around sound and vision. Much more artsy! I liked the 3D sound and the immersive technologies. It was very similar to the minority report stuff. Much more *you* focussed without the traditional screen interaction. We started looking into these in HCI back at uni so it was nice to see how it's progressing. There are some really interesting projects out there (links below).

One of the stories the guy was telling was really interesting. They work on 5D and have worked on film sets with the likes of Steven Spielberg. When Spielberg was making minority report he wanted them to use technology which was very possible in the near future. That fact made the penny drop with Minority report and made me realise it wasn't a H.G. Wells of the 00s ;)

Also another story I really liked was the opera house in Toronto which wanted to attract a younger audience. The Sony Centre provided funding and a complete *you* experience was created. It became a co-authored space which responded to people, changed lighting ambience based upon the clothing colour people were wearing and so forth. So the building repsonded to the people. I thought it was a very interesting idea (gave me my own idea of doing something like that with a combination of Artificial Intelligence).

Another interesting story was about the interactive cinema, where people decide the direction of the film. Although multiple choice, there's an element of creating a user centred experience.

The general message of the conference was about a User Centred experience and design approach and to fit the technology around the design and not the other way round. It also provided a different perspective on immersiveness and interface design that is much more interactive. Something we as a company are already thinking of doing (Wadud's idea #4 innovation portal ;-) those who have access will know what I mean).

One thing one of the panelists did say was that it's all well and good having a UCD approach but sometimes we don't want to interact, we just want to sit back and be shown a film and relax without to much thought and interactivity. I thought that too was an excellent point :)

Quotes
Here are some quotes I really liked from the Conference(I didn't get the names of who said them as I was typing on my i-Phone):

"New age of the Internet give as much as you take."

"No use resisting the drive to give away content on the Internet for free."

"A disconnected life is no life at all."

"Printing puts a mark on history i.e it is the roots, the time it was printed. Guttenberg should have invented the Internet!"

"Capitalism went digital. We moved to a digital economy we will live completely different lives - only thing Karl Marx got right" (although I disagree with that being the only thing Marx got right).

"The technologies that will be in the future are the ones that we have not yet imagined, no one imagined touch screens and mobile phones."

"Compartmentalising dooms towards failure."

"We are influenced by the relationships we have and search and discovery impacts that"

"The relationships we have shape our perceptions and inform the choices we make"

"Positive and brand associations are formed by positive interactive experiences."

"We spend out lived searching for people we can connect with and this is what enhances our experiences."


"Digital tech is at a stage where we can embed it into our lives and it becomes more about the you experience"


"Entertainment Weekly's video adverts are like putting a pacemaker in a corpse but it is genius because of the buzz created around it."

"Getting rid of the rectangular screen is a possibility for the future."

"Any interface should have a form that is related to experience."

"The child has to learn to use the computer the computer doesn't learn to use the child."



Links

Matterbox
Future of Sound
Show Studio
Cog App
Wet Design
Extra Version
Plugin Media (They're hiring for those interested).
Jason Bruges Studio
Vison Labz <-- One of my favourites. MOTH
Squid Soup <-- Another one of my favourites. 5D

Re-designing a Web Page

I am currently working on re-designing this website for a friend of Sean's.

My first observation of it was that there is no real structure to the home page. It seems to link off to different pages with no real 'web site'. Also it doesn't state what the purpose of the web page is. As well as that there are little links all very close together on the core part of the page.

Using Balsamiq I created a first draft design of the potential layout of the home page. Please have a look and let me know what you think and whether I can make any improvements.

Lifts in Radisson

The lifts in the Radisson are very poorly designed. They may appear to be cool because you pick what floor you want to go to from the outside and it indicates a designated lift for your floor. As a result you're a bit restricted.
I experienced this today, as a lady had selected her floor and the entered the lift, the doors had opened and had it been a conventional lift I could have hopped in. I hit my floor, and since the lift she was in hadn't moved, I thought that would also be my designated lift but no, it designated a different lift. So 2 people in 2 different lifts both about to move at the same time. What a green way of doing things!!

iRise

So for the past 2 weeks I've been working on a visualisation for a client using iRise. The visualisation is a mock up of functionality specified by the client.

iRise is much more sophisticated than Axure. It is possible to mock up applications as well as web pages. With iRise it is possible to use data sheets and manipulate data adding to the level of sophistication.

As well as that, it is possible to add comments to the visualisation when demonstrating it and associating the comments to the widgets.

There are many more advanatages to iRise which I won't outline here.

Some of the drawbacks are that it's a little bloated and if you're a technical minded person it is easy to fall into the trap of trying to do everything perfectly and technically correct.

Another drawback is that in order to view the simulation, iRise reader needs to be downloaded. Although it is possible to download iRise reader for free.

As I've only been using iRise for 2 weeks, I am still in the process of learning the full range of features.

Another tool I am looking into at the moment is Balsamiq. which focusses more on mocking up functionality than perfecting the UI. The UI is demonstrated through electronic representations of hand drawn elements. Can't wait to try it out :)

Prototyping Web Pages

When I first joined my current project, we were in the Elaboration/Construction phase. My job was to prototype the UI component (web pages) using a tool called Axure RP Pro.

Prototyping Advantages
The advantages of prototyping are that it allows direct user involvement with the functionality of the system from the beginning. This allows the user to determine that the use cases are being modeled correctly and the system is performing to their expectations as they are able to see the visualisation and simulation of the requirements and use cases.

Not only is prototyping advantageous to the user, it is also very helpful for the developer as they are receiving iterative feedback which means that the turnaround will be rapid when developing the real system. It also allows them to assess any future enhancements and determine any foreseeable issues for the future.

In terms of documentation, prototyping is self documenting as the pages can be annotated.

Prototyping is throw away code, it is easier to throw away and start again. It is very important to have that option at start of analysis, as continuing down the wrong track due to a lot of investment in developing screens, is generally, a bad idea.

Prototyping Disadvantages
Prototyping has many advantages, but along with the advantages there are disadvantages.

What tends to happen with prototypes is that users and developers forget that it is a throw away system and become very involved in the development of the prototype. They get caught up in getting the aesthetics right instead of focussing on the functional side and become too attached to the system. They lose sight of the fact that prototyping is to demonstrate the functionality and UI as a mock up system.

After involvement with the prototype the user can end up expecting the real system performance to be the same as the prototype. They overlook that in the real system there will be large volumes of data and other system issues like infrastructure, high volume of users accessing the servers etc.

Prototyping on Our Project
It was decided to prototype the UI on the project as this would allow the client and us to work collaboratively in order to establish exactly what the client wanted. It allowed us to determine the scope of the project.
It also provided the client with a visual representation of the use cases and allowed direct involvement and feedback on the potential system.

We achieved the following through prototyping:

• Input from the client


• Collaborative working through the workshops


• Quick turnaround

Axure RP Pro
Axure RP pro is a RAPID tool for prototyping web pages. It is more like a drawing package than a development system. It maps a storyboard on the model of the system, it achieves this though the use of ‘Wireframes’ of web applications.
The web pages are created by dragging and dropping components onto the screen.
Axure allows the creation of ‘Masters’ which are essentially like templates (i.e headers and footers) in word.

Adding components such as text fields, images etc is relatively straight forward with the drag and drop feature. It is also possible to link to other pages within the project or external links using the side bar on the right hand side. It is just a matter of selecting the component and then from the side bar menu deciding the course of action and whether the action should occur on ‘mouse click’ or on mouse ‘hover’. Linking pages in Axure is like linking one slide to another in Powerpoint.

It is possible to make the web pages interactive; however this is very limited and usually requires a fair bit of work for complex functionality.
As this is a prototyping tool, one would want to demonstrate interactive functionality. In order to achieve this in Axure it is possible to use a dynamic panel. On the main page you would drag a dynamic panel, with a ‘save’ button. You would then need to modify the state, which is essentially like another page. Once you have created your confirmation in the state, you can then link the save button to that state

If the interactivity functionality is fairly simple and straightforward the dynamic panel feature works very well. The difficulty arises in trying to demonstrate complex functionality, such as a tree view menu. The reason being, if there are many items and sub items in this menu then all the permutaions in that state have to be created, which can ultimately result in having many states. Now, if the task is to create the menu and not to modify it at a later stage, although a lengthy process it can ultimately be worth the time and effort. The problem arises if there are constant requests to make modifications here and there, in which case they have to be manually updated for every single state.

Fig 1: Axure RP Pro Editor

In order to view the ‘web page’ it needs to be built. This can be done as a single ‘chm’ file which is displayed as a help file or html pages with an index page.

When the files are compiled there is an option to generate them as CHM files or HTML files. Although in terms of viewing the web page the format doesn’t seem to make a difference, however the difference lies in that a CHM file is generated as a single help file whereas a HTML is generated with all the pages, images etc. So in terms of sending the files to the developers to create the pages it is easier to have a single CHM file.

Fig 2: Built CHM File

Fig 3: Built HTML File

Advantages of using this tool

• It is easy to use and can be picked up very quickly.
  

Mock up of web pages and an interactive demo can be created very quickly.

As the prototype can be viewed in a browser it can be sent out to the client, the Business Analysts and the developers.

The prototype can be version controlled as it is a single self contained unit.

Disadvantages of using this tool

• Everything is saved in a single .rp file even though a file can have multiple web pages this means that there is a lack of collaborative use and only one person can work on the file at any one time even if the multiple web pages are created by different people.



• If the .rp file is divided into two separate files so each developer can work on their web pages but needs to be integrated later on, this can prove difficult as it is a manual task as Axure does not allow importing other projects.



• If there is a consistent master across multiple .rp files and the master changes, the changes then have to be manually updated across the files.



• The final html/chm pages cannot be uses in the real system, so it is a completely throw away system.

Conclusion

• Prototyping is an iterative process that takes place at the Inception/ Elaboration phase


• Prototyping web pages is a quick and easy way that makes the development process easier, through user feedback


• Axure RP v4.6 Pro is a Rapid prototyping tool


• It allows the creation of interactive web pages using Wireframes


• It is easy to use


• It Lacks collaborative use


• New version (v5) meant to be far better

HCI and Web Design

One of my favourite modules at University was Human Computer Interaction 1 & 2. It was taught very well by Dr. Russel Beale and was fun and interesting. I learnt a lot from that module especially in terms of the human aspect of designing a system and web sites.

However, one thing I have found is that in the business I work in, HCI tends to be put on the back burner. It's usually not seen to be as important as the core functionality of the system and seen as 'cosmetic'.

I find it quite frustrating that basic concepts such as good colour schemes, affordances and metaphors are not taken into consideration when designing systems. Usually decisions for look and feel are made by the client, but there tends not to be a usability expert on either side to say 'hold on a second, we shouldn't do it like this because that page will look noisy' or 'the buttons shouldn't be arranged as 'Cancel' 'OK' as when people hit enter on most systems they are expecting it to click 'OK' and not 'Cancel'.

Other things we tend to lack is that (apart from UAT) we don't have end users directly involved with using the system iteratively as it is progressing. Techniques like Cognitive Walkthroughs would provide us with a fantastic insight into how we can make systems more user friendly.

Usability studies are usually based around human psychology and human perception and if the system layout doesn't meet the user's expectation then they will be reluctant to use it or they will not use the functionality to it's fullest.

Finally, I know the IT and business world isn't as black and white as this and text book answers cannot always be used due to other constraints. My goal is to try and incoporate HCI and Usability practices wherever possible.

Some Links to Usability Sites:
Neilsen's Usability Heuristics
Usability First