Posts tagged user interface

Facebook changes Pictures Display Interface (again)

starbase421:

Facebook has improved its picture display system again. This time, the picture orients slightly to the left, and the original post and comments are place at the right. It looks very similar to Instagram’s display system… hmmm…

Better, but still not useful. To me it just looks like another boring ‘light-box’ with a Google+ looking comment list.

I want Facebook to adapt it’s layout based on photo resolution. So if the photo offers a higher resolution image then it should stretch full-bleed against the canvas edge and display a carousel below, showing more photos in the album allowing a user to jump to another photo without being taken back out of the experience which is jarring to say the least.

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.

10 Most Beautiful UI Shots on Dribbble

pixelcloudsblog:

Today I have brought together what I believe to be 10 of the most beautiful user interface shots on dribbble. I hope this helps inspire you. Please feel free to add any others via the comment area below.

I hope you liked them as much as I do! Please share any others you love below!

And this is simply why user interface design rocks! Just look at that attention to detail with every pixel. As we enter into 2012 we are going to start to see a shift in the way apps are presented, display panels are improving in quality and mobile graphics are advancing which means for designers every pixel on the screen needs to be perfect! 

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.