The Floppy Disk icon means “Save” for a whole generation of people who have never seen one.
Facebook changes Pictures Display Interface (again)
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.
BBC Homepage Responsive Redesign
The BBC homepage has recently been updated with a new much cleaner design. What is noticeably different is in how the webpage functions. Users navigate via a horizontal slider where content is broken up into 5 categories and sub-divided into 3 main screens (left, middle, right). Below the top DIV content is further organised into 3 sections which expand into accordions. The homepage uses a ‘responsive’ layout which will adapt to two different sets of layout styles.
Main Layout Style
A style for higher resolutions that takes advantage of the dead white space surrounding the main canvas area in order to display additional content. Something I have been urging websites to do well back in 2009, it just seems so logical especially now as larger monitors are more widely adopted.
Tablet Layout Style
The second style maintains the clean layout structure but cuts off the additional surrounding white space and reduces the navigation buttons to fit inside the window.
It doesn’t seem that they added an additional style for mobile devices which is unfortunate but I guess they did this because it will enforce their own mobile version to display or that they didn’t want to impact the page loading speed. Either way, the website looks pretty and is now good enough for it to become my web browser homepage. :-)
TYPOGRAPHIC DESIGN
“Metro, the design paradigm behind Windows Phone is in part, a celebration of typography. In this short film, godfather of modern type, Erik Spiekermann talks about how typography is used in the digital domain.” via nitingarg
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.
40 Excellent iPhone App Website Designs
If you are a developer and own your own iPhone app, here is a collection of 40 beautiful websites featuring iPhone apps to provide you with some inspiration on how to present your app in a clear and visually appealing way. Below are my two favourite examples because they use my favourite blend of colours, which is lime-green, mauve and teal, in the perfect way.
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.
Google Reader UI Redesigned
Google Reader finally gets it’s much needed facelift and what a difference it makes. The changes comes as part of Google’s recent move to focus it’s attention on updating it’s apps for better usability by keeping elements well-spaced, providing simple navigation and displaying information clearly with less chrome.
Things that have been changed or added
- The default home view shows a list of new unread posts
- The default home view now shows a right column displaying recently starred, recently kept unread and recently read posts
- Elements such as buttons, markers and the scrollbar have been updated with the new design
- Ability to natively +1 a post and share to Google+
- Trends tab now displays statistical data on usage (you can also view individual stats for a subscription by navigating to the arrow and clicking ‘view details and statistics’)
- A shadow appears when gradually scrolling through the navigation pane
Most users spend countless time in Google Reader consuming content so it is only right that the experience they have is pleasurable and not painful.
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.
Came across this well designed YouTube channel from Chow.com.
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.
