Posts tagged Design Review
Posts tagged Design Review
Mashable is amongst the most popular websites on the internet for news, information and resources related to digital media. Founded in 2005, the site reportedly receives approx. 20 million unique visitors every month and is considered amongst the most trusted source for happenings on the web, social media and technology front. The site recently went in for a redesign. The most drastic change was brought about to the homepage, where the entire news feed appears.
On the surface, the site looks classier and modern than before. With a cleaner and wider design, minus the typical ads column, focus on the content seems enhanced. Mentioned below are some of the key pluses:
1. More visual content - With images for every story, that too larger in size, the page looks more attractive and contemporary.
2. Infinite scroll - Pagination has been replaced with an infinite scroll which is a good idea for such a feed-based site as pagination breaks the flow and slows down the browsing.
3. Responsive - A nice feature with specific focus on mobile and tablets. The 3-column design automatically jumps to a 2 and 1 column layout as the window size goes smaller.
With such elements and characteristics, the redesign seems to be a step in the right direction. But as you spend some time using the site, certain issues with the new design - particularly the interactivity - come to the fore. I’m putting across few points that have struck me as problematic:
1. Did I miss something? - With the full-width utilization and a 3-column layout, the page now throws much more content at the users. Since the columns aren’t aligned horizontally and have content in varying sizes, it becomes difficult to scan through them together. The problem is further accentuated with an infinite scroll, and one consistently feels ‘missing out’ on certain content on the page while scrolling down. For people looking out for interesting stuff on the page (irrespective of how it’s been categorized here), this doesn’t work at all. The pinterest-styled layout works for visual content, but not so well for mixed-media (image/text) content here.
2. What’s important? - As per the rational provided by the Mashable team themselves: the column on the left presents the new stories, the middle column shows stories that progress to being popular, and the third column shows content with the most social engagement. Seems like a sound logic at first. But what this also implies is that the column on the right - which is visually most attractive - changes the least often as the most popular stories are few. And the column on the left - which presents the stories in the visually least important fashion - is updated most frequently. For people (like me) who are looking for interesting and fresh content, and come back to the site multiple times a day, this doesn’t work as the focus isn’t on what’s new.
3. Ads everywhere - Rather than a dedicated column for ads, here the ads appear spread out within the 3 columns. This makes sense from a push-advertising perspective, but not from that of an end-user as these are irritating to see everywhere. They also break the flow of browsing and make the user jump between columns, further adding to the problem 1 here.
4. Content indicators removed - In the earlier design, the story titles included certain tags to help identify the content in the story. These have been removed now, though it’d been nice if they could have been retained in some form.
Such interactive issues makes one see through the initial sheen of the redesign and wonder that if it does not help the users go through content in a more efficient and engaging manner, then how truly successful can it be considered. The current design is definitely visually more attractive and driven by latest trends in technology, graphics and marketing; but a context-driven user-centred perspective seems missing here in this exercise.
Inspite of definite improvements, the design needs more thought and consideration from the aspects of user’s informational needs and reading patterns. An eye-tracking exercise could be extremely helpful here to better understand how and when are the users moving through the story columns. It is unlikely that the new design will change anytime soon since it is a humongous effort for a site like Mashable, but here’s hoping for certain iterative improvements in the time to come.
Flipkart is a popular e-commerce portal in India, an Indian equivalent to Amazon in many ways. And beginning with books, they eventually moved to products like electronic devices, games and stationery over a few years and now even offer niche items like toys and posters.
They have a pretty straightforward and clean interface, which hasn’t changed much over time. And having bought some books and electronic items from them earlier, I never had much of a problem. But recently when I was checking out the newly introduced posters on the site, I realized that the browsing pattern on their site failed miserably for such a product type. The whole activity was extremely tedious and to filter out 2-3 good posters, it took me a couple of sittings!
To make my point clear, let me explain how browsing in flipkart works. While going through the site, eventually any user lands up on a screen with a list of products, and upon clicking on any one of them is taken to a page with the details of the product (name, price, specifications) along with a small image (one or many). The image/s are usually pretty small in size and need to be clicked upon to view in a decent enough size as a pop-up.
In such a model, the images are given relatively less importance (multiple clicks needed to view image in a decent size) and once the user reaches the detail page of a product, it is extremely cumbersome to return back to the original position on the product listing page. This implies a behavioural assumption that the user generally chooses one product from the list and then spends time going through its details, and repeated to-and-fro movement is rare. In a way it also implies that the user generally knows what he/she is looking for, rather than browsing through the items in a vague fashion.
This kind of interactivity works fine for products like books, cameras, mobile phones etc. - items whose specifications/features/content are more important than the product images - and the users usually have certain references in terms of what they’re looking for.
But for visual media like artworks and posters, where images are of prime importance and the user would generally browse through a large no. of products while making a selection - the currently offered interactivity fails. Being a category where the graphic quality of items (judged upon looking at the visual in a large size) is the key deciding factor, forcing a method that requires multiple clicks to view images and no cross-product navigation, is painful enough for the user to give up in just a little while.
Instead, what’s needed here is a way for the users to quickly browse through large-sized images across products - say using a slideshow (sample image below) - which would definitely be more satisfying and efficient in such a scenario. Some other product categories like Toys and Watches also have similar requirements of a different kind of interactivity in my opinion.
Looking at such a scenario, I believe what a site like flipkart - which has a wide product variety and is expanding - needs to do is offer different navigation and interaction models for different product categories best-suited for showcasing the items inside. Generic interactivity, though simpler to implement, does not make much business sense since the associated bad user experience can kill certain product categories, as demonstrated here.
Thus designing and implementing a few customized interaction models - offering intuitive and quicker way for users to view and choose different products - can go a long way in improving sales, customer base and associated revenue for an e-commerce portal like Flipkart. It though needs to be ensured that the different patterns gel together as part of the same family, and offer a smooth transition from one to another. Flipkart’s music store Flyte is customized to certain extent, which is good to see. Here’s hoping for appropriate improvement in other categories as well.
Pinterest (http://pinterest.com) is a new social-networking platform that has appeared very recently and exploded on to the scene; gaining nearly 13 million users in a very short time. Being a new phenomenon, it makes sense to have a closer look at this new interactive space and understand what it is meant for, what factors contribute to it’s popularity and whether you & I should be a part of it.
What is it about?
Pinterest is basically a social-networking site for visual media. It is essentially a bookmarking tool using which you can post visuals that you come across and like over the internet on to your page. People create ‘Boards’ - such as Art, Clothing, Typography - and ‘pin’ images (and even videos) onto these boards. Being connected to Facebook/Twitter, you’re automatically connected to few of your friends from the two platforms to get you going. The homepage of any person shows the visuals pinned by person him/her-self and the people he/she is following.
Why is it popular?
Images and Videos form the most popular media amongst people. They offer instant gratification and require minimum time to go through, as compared to reading - it is easy to notice that images/videos form the most popular content on sites like facebook as well. And it requires minimal effort here - one doesn’t need to create stuff - you can just put across the cool visuals you find on the net. No authentication, no attribution - it’s open and quick.
How does it differ from other networking tools?
Pinterest though quite different, but in a way is closer to Twitter than Facebook or Google+. You don’t share much of personal details, you don’t necessarily follow people you know, and you can’t stop people from following you. It is a one-way stream - share cool images and gain followers.
Actually rather than being a networking space, it is more of a content platform since the people behind the content rarely come into the picture.
Who should be a part of it?
Being an extremely visual platform, it automatically becomes an attractive space for people from creative streams - arts, photography, design, fashion etc. But in terms of interesting content, it has something to offer to everyone - as images can be cute, hilarious, mesmerizing and more. Visual inspiration is for everyone.
P.S. Definitely a place for people close to the epicentre of marriage - women (or men :P) planning to get married and newly-weds looking to decorate their house.
What to expect?
Depends on the interests you express in your account and the people you follow - cute images of kids or animals, models showing pretty clothes, classy landscape photographs etc. There is a lot of content being shared by people, which can make you spend a lot of time here without realization.
What not to expect?
Being the medium it is, words don’t have much place on Pinterest; unless they’re on a poster. Thus a lot of intellectual content gets excluded, as it is essentially not in a visual format. Pinterest is thus a place where you might come looking for certain superficial gratification or inspiration but never for an intellectual dialogue or relevant information.
Role of design?
Pinterest is a well-designed space. The overall concept is well-thought and made extremely simple and straightforward with a nicely designed interface. It is very easy to get lost and mesmerized in the sea of visuals that have been placed in a neat and clean grid. The actions are few and easy to understand. Overall, the ambiguities are few. The design is contemporary, functional and appreciable.
Though interesting, in my opinion it is still a dispensable-kind of platform for many people. It is inviting, but not very engaging. It doesn’t have the kind of recall that facebook and twitter has to pull people back continuously. Also, the social aspect to it needs tightening; right now it seems to be way too far in the backdrop as compared to the content. From what I’ve seen till now, there is hardly any dialogue between people here. Maybe these aspects will become clearer as the platform matures.
In terms of the interface, the Search is a bit fuzzy and difficult to comprehend. You do understand how it works with images, but not with people. It is tough to find your facebook friends here.
Pinterest is a nice example of how a niche need or tendency of people can be turned into a new and relevant product. In the sea of the Youtubes, Facebooks and Twitters, it is an idea that could’ve been easily lost. But thankfully, it represents a very focused approach and clear thinking - from the need to conceptualization to execution.
Do try out Pinterest, let me know if you need an invite.
Well I haven’t designed a Wallet ever, but I do always use one, and hence have bought quite a few of them in the past. And every time I’m at the stores having a look around, I’m kind of surprised upon seeing certain widely-prevalent elements in their designs which make very little sense. They appear to be predominantly designed for people with a certain kind of a lifestyle only, which is unfair and illogical. So I thought I’ll try to think of some basic pointers which in my opinion and as per my experience should be considered while designing men’s wallets. Here we go:
1. Yes, we do use coins!
I’m quite surprised to see the no. of wallets in the market that either don’t offer any provision for storing coins or are extremely ill-equipped for the purpose. Coins do fatten up the wallet but to discourage their storage through such measures is quite ridiculous. Loose change is needed for a no. of purposes here in India and hence should definitely be considered for. A well-designed enclosure that allows a decent no. of coins to be stored along with ensuring that they are uniformly spread across the surface of the wallet (keeping it thin), rather than sagging down to one-end, would be lovely.
2. No, the male posterior isn’t flat.
Well that’s a well-known fact. So there is no point making a flat product if it’s not going stay flat. Wallets start warping awkwardly the moment we start using them, and eventually taken on some weird shapes depending on how the items inside are place for long. How about a more complimentary form though still ensuring that items like credit/visiting cards retain their flat shape?
3. Make it thin.
Nothing feels worse than a fat wallet, no matter what the advantage. So features that add up to that thickness like additional folds (tri-fold wallets), thick material, loop buttons etc. should be avoided in my opinion. Intelligent distribution of space within the wallet, as well as more efficient ways to store items (such as coins) can also counter unnecessary addition of bulk.
4. Allow customization.
The kind of items and their quantities that people carry in their wallets vary; some carry a lot many credit/debit cards, some prefer to carry a lot of coins for their own practical reasons, while many like to carry a lot of cash, and so on. So other than offering different variations of wallets for all these different people, it could be a good idea to allow people to customize their wallet e.g. the wallet could comprise of large open areas which people can customize using some of the accessories that come along at the time of buying. It could be an interesting experiment to see how people react to freedom of this sort.
5. Expandable Spaces
Certain items that we carry in our wallets like coins, cash tend to undergo quite a bit of variation, from a lot to none. Thus rather than permanently allocating certain volume to them, it would be good idea to offer a detailing that allows certain areas to expand when needed e.g. use of a flexible material at the edges that allows the space to expand when stuffed with more than normal quantities.
Thus to summarize, a well-designed wallet for standard usage should adhere to the following basic functional characteristics :
* gives an impression of being capable of storing all that the customer wants to in an adequate manner, at the time of buying.
* is comfortable and convenient to use and carry.
* allows customization as per personal needs and under certain circumstances.
* looks good even when used over time.
Movie Tickets are one of those items that no one really pays a lot of attention to. They have a fairly short life span if you think about it. But that doesn’t take away the practical need and timely relevance of the various details over them. And like any other product that has a certain purpose attached to it for common people, these need to be designed in accordance with the specific needs of these users.
Movie tickets have a variety of important information to present to different people under varying circumstances. These people primarily comprise of two groups only: the Customer and the Cinema Staff. And the relevant details to each vary under different circumstances. To better understand the various needs from this product by the users, let’s have a closer look at some of the key scenarios of use:
# Situation1: At the counter, customer buying the ticket.
Is it the correct Movie? - Movie Name
Am I (or the Kids) eligible? - Viewership Rating
Is it for the correct day and time? - Show Date & Time
How much do I have to Pay? - Price
None (since details are checked on the computer before printing the ticket).
# Situation 2: Customer has bought the tickets, but not entered the Cinema as yet.
When is my show? - Show Time (the Day/Date is usually the same or known)
# Situation 3: Customer entering the Cinema, getting the ticket checked.
Which way is my Screen? - Screen No.
Is it the right time for him/her to enter? - Show Date & Time
Is this person eligible for this movie? - Viewership Rating
Which way is the Screen? - Screen No.
# Situation 4: Customer entering the particular Hall, to be seated.
Where do I sit? - Seat No.
Is this person in the right screen? - Screen No./Movie Name
Where is he/she supposed to sit? - Seat No.
Now if we look carefully at these realizations, we can arrive at certain inferences here:
- Show Time, Screen No. and Seat No. are the most important details (repeatedly checked or critical).
- The Show Date, Movie Name and Viewership Rating come next (checked maybe just once or so and/or usually remembered).
- Price is of least importance among them (rarely seen once paid).
Time of Relevance
- From a Customer’s perspective: Movie Name, Viewership Rating, Show Date, Show Time and Price are important before entering the cinema, while Screen No. and Seat No. become key once inside.
- Details like Show Date & Show Time, as well as Screen No. & Seat No. being intuitively associated, should logically be placed together on the ticket.
Considering the above mentioned conclusions, shown below is a sample design that could potentially represent be a better way of presenting information on a Movie Ticket:
(Please note it represents a sample from a structure/layout perspective only; a lot of visual exploration can further be carried out).
Mentioned below are a few merits of this arrangement of details from a design and usability perspective:
- A vertical and left-aligned display aids scanning and findability, as we naturally read from left to right and top to bottom.
- The most important details have been indicated using a bigger font size and made bold. They would naturally catch more attention than the rest. The font sizes used on the ticket are in accordance with this criterion.
- There is a clear distinction between information that holds relevance for customers before and after entering the cinema (top and bottom). Also, the details that need to be read inside the cinema –extremely dark and low on light, have been shown on white background for better contrast and ease of reading.
- Viewership Rating has been emphasized through red colour - as an alert. It is a detail that should catch attention only when needed (adults only), and could be less conspicuous otherwise.
Shown below are some of the currently available tickets of cinemas in Mumbai:
Though none of the needed information is missing, it is fairly apparent that the required emphasis on the important details as well a relevant structure is missing here (even if we ignore the clutter around).
Going out for a movie is supposed to be an enjoyable and relaxing experience, and though not a make-or-break criteria, a better and unique ticket design can add its own small qualitative layer of positivity on the overall experience by helping people find information easily, waste less time and make fewer mistakes. Here’s hoping for a sensible and more user-friendly change soon.
Multiple Homescreens are nowadays commonly found in high-end portable digital devices like the smartphones and tablets. They are considered amongst the attractive features of a device with new gadgets increasingly having more no. of screens. The new iPhone/iPad is supposed to have 11 home screens.
The rational for having multiple homepages is pretty straightforward: with increasingly sophisticated devices allowing people to install a lot many applications and games, more amount of real estate is required for the user to place the icons for regular access.
But whether multiple homescreens are the right solution for the purpose is debatable in my opinion, especially with respect to the issue of ‘Findability’. Let’s envision a scenario: If i’m using an iPhone, with 11 screens, and I suddenly feel like playing a particular game or opening a particular document saved on one of the screens, it would require me to flip through the various screens (maybe 10 swipes), scanning each one of them individually, till I find the particular icon/file. Simple enough, but not the best method always I’d say.
People do try to remember and organize stuff to help themselves out (though many don’t). Even if we assume that people have taken the pain of categorizing icons & files across the screens as per certain themes (e.g. office/multimedia/networking), it still doesn’t take away the fundamental issue with the pattern itself: lack of user’s understanding of the relative orientation of these screens. If I’m having one screen in front of me, which way do I start swiping to quickly find the item that I’m searching for? Especially if one is in a hurry, this can be quite bugging, as it makes you ‘think’ everytime. The indicator dots at the bottom don’t help much.
If we look at the ways the issue of ‘findability’ has been addressed at other platforms, there are a no. of examples that can be pointed out:
- Location of certain important/popular items tend to be fixed e.g. On the desktop, certain key items like My Computer, My Documents etc. tend to have a fixed location, under the Start Menu or as icons on the desktop.
- On e-commerce websites, there is the option to view items in ‘Grid’ (focused on images) or ‘List’ view (focused on text/name). We also use the same variation while searching for files on our computer; grid view is helpful while looking out visually, while List/Detail view becomes relevant when the name or certain file detail is the reference.
- On email clients (gmail, yahoo), the items are listed by default as per date/time; always showing the latest ones first.
- While searching for files on the desktop; we tend to sort items as per ‘Type’ (Folders, Word, PDFs etc.) which shortens the scope/list for the user to look into.
Thus taking inspiration from these examples, there can certainly be few design alternatives that can be tried out to help the users quickly find they’re looking for on their phone/tablet without necessitating any forced methods of organization. It is important to remember that the attempt here is to help the user avoid 7-10 swipes (between multiple screens), avoid the dilemma of thinking everytime, and save time.
- Allowing the users to fix the location for certain icons (e.g. a desired portion of the screens - 1/2 rows), which doesn’t change when the screens are flipped through, and could contain the most important/popular items of the user.
- Allowing the user to switch to List view, with items across all screens listed out collectively (using a scroll). The files could be sorted as per their ‘type’ (games/applications/documents) to help shorten the search. This could be specifically beneficial when the files becomes a lot in number. Probably, rather than having multiple home screens, one could even choose to retain this as the default view.
- Allow user to allocate names (as per their personal organization methodology) to the different home screens, and further provide short-cuts to them from the default home screen. Showing a couple of most popular icons from each screen alongside could further help in quick identification and recall.
Just a few quick ideas which probably could be worked upon considering that we’re moving towards more amount of content on our portable devices, with increasingly bigger screen sizes, and hence more complicated scenarios.
I recently came across Nokia’s new charger that they’ve been giving along with their phones, the AC-15N, and was pleasantly surprised to notice the design change that has been incorporated into the relatively mundane product.
The charger has a 3-pin plug, of which the top pin slides in and out of the housing. Though seemingly a cosmetic change, after some amount of comparison with their previous charger, it seemed to bring in a drastic change in the overall volume and dimensions of the product. The new charger is nearly half in volume of the previous version, and lighter as well. Definitely a sensible modification, especially for the frequent traveler who always needs to carry it along.
One might ask, why not do something more drastic? I believe the reason they have been able to do this with the top pin only is because it is just meant for structural purpose, and has no electrical circuitry attached. The top pin is made of plastic, and hence cannot conduct; thus in all probability, it just ensures the other two pins are inserted in the correct holes.
It is important to notice that the charger is generally an auxiliary product that goes free along with the phone. Covered in the packaging with no visibility, it plays no role in selling the phone. So generally the expectations aren’t much. But a feature like this will bring a smile to your face when you open the packaging of your phone and realize that someone has invested time and thought looking into your finer needs as well. The money feels well spent.
I’m not much of a traveler, but I generally wouldn’t put the previous charger in my laptop bag because of the sheer bulge and pressure it would apply. I wouldn’t mind taking this one along.
Recently Facebook started displaying photographs in a unique manner on their site, here’s a look at the particular style of interaction and display.
Earlier, upon clicking on a thumbnail for a photograph, the facebook interface used to navigate away from the original page and showed the photograph opened up. Now, the snap opens in a kind-of-pop-up over the original page. Any facebook user would know what I’m talking about here.
Firstly, some plausible reasons that came to my mind over why such a feature would have been introduced at the first place:
- Retain user location: It allows the users to stay at the same location thus avoiding unnecessary navigation, since the image appears over the original page. With the facebook homepage being really long (read requiring a lot of scrolling), moving away from it for viewing a set of pics can be a bit painful, thus it seems relevant in a way.
- Advertising advantage: The pop-up appears with a sponsored advertisement under the pic on the right side. This seems to be an unlikely driving factor for the feature, but facebook guys seemed to have made use of the situation.
Now as mentioned, though relevant to some extent, here are some reasons why it still doesn’t turn out to be a great feature:
- Unknown page type and behaviour: It is difficult for a new user to realize how to interact with the image page because of its display attributes. The photograph appears with a close (x) button and a transparent background, making it seem as if its a pop-up or overlay, but it’s scroll appears on the extreme right side, giving an impression as if its a full page. The scroll actually seems to be for the page behind and not connected to the image at all. But if indeed a pop-up/overlay, it should have been of a fixed size, smaller than the page behind, with a scroll inside if needed. It appears to be an entirely unique interaction pattern, and a difficult one to understand at that.
- Subsequent interactivity from page: With certain other links on the image page (folder for the image, tagged users etc.), the subsequent behaviour of the page if these links are clicked is ambiguous. Its unclear if the particular link would open in the same pop-up or open a new tab/window or replace the page in the background. This adds to the discomfort of the user with the page.
- Inconsistency of usage: There are ways by which the user might end up viewing images in the old way (viewing it in the main browser window) such as by pressing ‘Refresh’ while viewing the image. This lends inconsistency to the interface and user expectations.
- Cluttered Interface: There end up being 3 close (x) icons on the page - one for the pic, one for the tab and another for the window; and 2 ‘like’ and ‘comment’ links with no real difference. These don’t help the overall clarity or comfort either.
Thus on the whole, though functionally relevant, the feature turns out to be a let down in terms of its intuitive character and overall user experience. I’m all for creation of new patterns, but they need to be simpler and intuitive for users to understand and experiment. Probably a little more thought should have gone into the design especially considering the widely varied user group of the medium.