The Floppy Disk icon means “Save” for a whole generation of people who have never seen one.
Redesign: Windows Phone Marketplace UX
The Windows Phone marketplace was the first website that Microsoft released that had a feel of Metro to it. It’s a dramatic shift from how Microsoft were previously designing their web pages. Text, DIVs and graphic elements have better spacing, heading fonts are better (but far from perfect) and because the page is cleaner looking it is a lot easier to navigate and find where you are.
The Problem? See below.
I highlighted the most prominent issues regarding the layout and design. There are certain aspects to the page that are either unnecessary or could be improved. Such as the way users navigation through app screenshots in a way that isn’t generically copying Android’s marketplace and improves upon what Apple has done with their basic horizontal scrolling. (that’s so 2007)
Disclaimer: All images used are for illustration purposes. No copyright infringement intended.
Compare the two images and you will notice a dramatic improvement. Elements on the page are correctly sized and positioned. And the main featured element on the page becomes the most important section, the screenshots instead of the tile icon which is still important but not so much that it takes away from the reason users are on the page in the first place, TO SEE THE APP!
How users navigate app screenshots
Instead of the generic grid of portrait images, users are presented with a modern stylish looking Windows Phone (HTC Titan) that immediately makes the Windows Phone marketplace stand out as unique featuring it’s own product with pride as the main interaction element.
Using the Metro Panorama UX:
What better way to illustrate the beauty of Windows Phone than to make use of the panorama controls as a slideshow. This can easily be done in purely HTML5 or as a JQuery script. (but should not be in Silverlight which is not supported on mobile devices)
* Notice something unique? The screenshots are displayed in their correct orientation and not forced in portrait. I imagine Microsoft uses some form of CMS system to input app data into the marketplace. Developers should be able to select whether their app should be displayed in portrait or landscape when submitting their app. The CMS will then use two different sets of CSS and asset files as templates so the CMS can make the adequate changes to reflect the orientation change. This solves the problem of a developer manually making the changes for each app.
Support for Video playback
Developers will have the option to feature a H.264 HTML5 video (Silverlight or Flash as a fall-back if they’re using an old browser) of their app in action that will play in-line inside the Windows Phone. Videos tend to attract more attention because by nature humans are visual so by creating more engagement with users they are more likely to take up a ‘call to action’ such as sharing, downloading or purchasing an app. (Videos must be in sizzle-reel style showing real-time playback through capture software and not a video captured through a camera with narration. This is to maintain continuity with a high-end level of quality)
Navigation controls
Users will navigate screenshots by either:
- Clicking and dragging/grabbing the far right or left of a screen and moving either way
- On a touch device? Swipe left or right because the slideshow would be optimised for HTML5, CSS3 and jQuery instead of SL or Flash.
- Use the directional keys on your keyboard
There are rumours circulating that Microsoft may merge the Windows Phone marketplace inside the Windows Store and so my design proposal would by default be defunct. However I still believe that it is important that they pay more attention to little details as the UX and get that Windows Phone on the page.
GOOGLE NAVIGATION MENU
Google has updated it’s navigation menu from what was the fixed horizontal bar to what’s now a dropdown menu when hovering over the Google logo. This was most likely done for usability reasons, seeing as the average person focuses on left elements first which means it will now be a lot easier to get to common Google section. In terms of design, I would have preferred the menu to be completely white, I’m not sold on the heavy use of dark grey I think it’s detracting and at least should be toned down to a lighter grey.
Case-study: Is Amazon too confusing?
Well Angelina Jolie seems to think so. “Brad and I were on Amazon.com for the first time a week ago. But we got lost. After an hour, we just shut it off. My brain is too scattered and the wires go in different directions. I’ll stick to catalogues”. This was said by Angelina Jolie after being asked by USA Today on whether she did her Christmas shopping online.
Make of this what you will but it got me thinking nonetheless about eCommerce websites in general. While it certainly is true that millions of people globally shop online, it does not necessarily mean that websites like Amazon are intuitive and easy to use because of this fact. I think that there is a large percentage of people that simply find sites like Amazon confusing which I think is mainly to do with a lack of spacing between elements that forces things to feel cramped and disorderly.
In the example above I simply made some minor adjustments to the spacing of elements including the navigation, removed a few unnecessary wording and breadcrumbs from the column and positioned the important prices of information beside the item instead of below. As a result you feel less bombarded with lots of information as the page is properly structured and cleaner to look at.
In previous years eCommerce sites would have had to cram in loads of data above the fold because users were using smaller monitors, but now with much higher resolutions and screen sizes being commonplace there is no excuse.
Here are some tips which I feel need to be considered when designing for eCommerce.
- Don’t overload your pages with unnecessary breadcrumbs. One below the navigation should be enough of an indicator.
- Consider using an adequate XHTML/CSS grid system when planning the site structure in order to space out your elements as best as possible. For a list of grid systems to use see my Links page.
- Avoid using lengthy or unnecessary verbiage, instead use words that are easy to understand and direct. i.e: Find instead of Go
- Consider the information hierarchy, data which has a higher level of importance such as ratings, price, offers must be presented first followed by secondary information like the description etc.
A great eCommerce site is one that cuts down the numbers of processes required in order to make a transaction in a way that is fluid and orderly that will make for a better experience.
Inspiroidu: Why user experiences are important
inspiroidu:
Building good user interfaces is important tasks to let customers interact with a system effectively. Creating positive user experience is a next step that leads to making customers happy after interacting with a system.
Interface is a means by which users interact with a digital system effectively. It includes controls, tabs, navigation and other elements. The task of a designer is to organise interface elements on the screen in such a way that user can interact with them the most effective way. In ideal case user interface design would be based on goals of users, usability principles and will go through several iterations.
User experience is a means by which you include the whole context of users’ life in the design process. It means that you create only those interfaces that make user’s life more pleasant and his experience working with a product more indulging. What is important is that user experience could be created or improved without changes in the user interface.
As usual, products of Apple provide great examples to illustrate the difference. To download an application from the Apple application store user has to input his password. Apple provides good form for this purpose. User inputs his password that is semi-hidden and makes input on a mobile device more effective. Creating good form for inputting password is a task of a user interface designer. Now, what happens if user wants to download several applications in a row. Normally, she would has to input password all the time before another download starts. Company, however, took this tasks in a context of a real user. If she wants to download several applications in a row and has already input right password once, then why bother with asking the same question several times? Instead, iPhone or iPad memorizes the password for 15 minutes, so users get more pleasant experience of interacting with the application store.
Lessons learned:
- User interface is a part of a user experience
- User interface should help users to complete asks the most effective way, user experience should aim at indulging users while interacting with a product
- User interface design focuses on a particular screen while user experience designer focuses on a context where and how interaction happens.
Nest Learning Thermostat from Nest Labs
There is a good chance if you have read any Tech news in the last 24 hours you have already seen this. It is the hottest topic in tech at the moment. Tony Fadell who previously worked for Apple and helped design the technology behind the iPod & iPhone has started a new venture called Nest Labs. Their first project is a revolutionary thermostat.
Nest actually learns your behavior patterns after interacting with it for a couple of days. The screen also turns on when you walk up to it. And most importantly, it helps to conserve energy. All this while looking stunning and being extremely easy to use: no more programming. Read the full Wired article here.
Somehow, the idea that ‘users don’t scroll’ didn’t manage to die with Facebook and Twitter’s newsfeeds.
It’s never been a lack of ability of users to scroll, it’s been your lack of ability to get them to scroll. As Tufte likes to say, that’s ‘a failure of design’.
Here’s VW with a great example of keeping a user engaged in your story as they scroll vertically. It’s similar in essence to Nike’s site I posted about back in January. My pal, Mr. Vogler, also suggested this.
This is what I would have liked Facebook do for Timeline. Use scrolling a bit more dynamically to make the UX more interesting by fading-in content as you scroll and use a horizontal scrollbar to navigate different points on the timeline. This is something I’m currently working on conceptualising.
Rotor Dial Camera Design by Charlie Nghiem
“Paris-based designer charlie nghiem has reinterpreted the user interface of the digital camera. Getting rid of buttons all together, a stacked cylinder composed of several rotating parts allows users to choose their settings when a section is spun, a corresponding line appears on the screen. All the functions are the same however, accessing it is made simple. The column is also ergonomic taking into consideration the movement and positioning of the fingers and hands.”
Why In-Page Navigation Links Matter More Than Menus
Menus are handy and your site should have one, but they can’t engage users on a level that in-page navigation links can. This is because menus don’t come with content. They’re ambiguous labels that have little meaning to users who visit your site for the first time. First-time visitors aren’t looking at your menus to navigate. They’re looking at your content to navigate, which is why you should focus more of your energy on designing your landing pages than your menus. The landing page is where the user’s journey begins. It’s the starting page for an area of your site that includes attractive headlines, images and text to entice users to click-through to learn more.
Greg Bernstein redesigned the iTunes license agreement.
via The Daily
