Apple Adopting Flat Design? Yes, Please !

 

apple logo 2

There’s report that Apple’s legendary design master Jonathan Ive is leading Apple’s iOS user interface toward another direction: ‘flat design’.

This is really long time coming!  It’s about time we get some fresh air on iOS UI. And Apple shouldn’t let Microsoft steal all the thunder with Metro UI. I just can’t wait to see Apple’s interpretation of flat design!

 

 

 

UICraft: Zite’s New Rating UI

Zite is a pretty awesome self-learning, self-evolving intelligent specie(app) in the app universe. He feeds you with content gathered from Internet and devour your rating (Like/Dislike) so he can evolve into a clone of your news taste.  The more rating you give him, the faster and stronger he’ll evolve, and you’ll be fed with better quality universe essence (selected content).

Well, enough of my ‘crappy’ Syfy analogy. Zite has always been my favorite news aggregator. The minimalism design and the personalized rating system make it perfect for my daily news consumption. The app got an upgrade lately and I found the rating UI also evolved a bit, and I love the changes.

Before:

Zite displays a ‘rating bar’ on the bottom of the screen, where user can ‘like’ or ‘dislike’ the content. The ‘liked’ content will be fed to the user more often, while the ‘disliked’ less. It’s a simple and effective user interface:

Photo Mar 14, 3 25 56 PM

User can touch the ‘thumbs up’ button to ‘like’ and ‘thumbs down’ button to ‘dislike’.

After:

The new UI looks the same, but adds another rating layer when you touch the ‘thumbs up’ button:

ZITE rating bar evolved

If you like the content on the page by touching the ‘thumbs up’ button, the rating bar will expand upwards and display multiple tags related to the page. You can further specify which tag represent the reason for your ‘like’, so Zite could know more precisely what part of the content you like and feed you more in the future.

 

Summary

Content rating system has become more and more important for all the content providers. Great content is no longer great enough for today’s indulged users.  As a content provider, you need to offer great personalized content. And to do that, you need to have a powerful and easy to use content rating system to learn your user’s taste. The system needs to powerful enough so it can efficiently pinpoint user’s like and dislikes, but not making the experience too complicated so user will get overwhelmed. That’s why ZITE’s new UI did such a great job. Simple and intuitive 2-steps UI that nailed the sweet point of the content for the user.

Maybe Netflix, YouTube and other content providers could all take one page or two from ZITE’s UI playbook.

Eye-Tracking Smartphone UI: Yes and No

Came across this article ‘The Implications Of The Interface That Watches You” today. Eye-tracking as a new way of user interaction is intriguing, but after some thoughts, I think it’s very limiting:

eye-tracking

Image from: TechCrunch.com

1.  Eye movement is a’ subconscious’ behavior, hard to control.

When we move our hands, our brain needs to command it to do it and we’re aware of it. Eye movement is different. We do it unconsciously. We automatically blink when we read for a long time. We move our eye balls up and down when browsing the web without thinking about it. Now if an app or smartphone tracks our eye movements and makes the app responding to it, all these random moves will start to mess things up. User will grow nervous about their eye movements, adding HUGE pressure to the experience. A good app design should try as much as possible to NOT make user think. This is making user think MORE about something they never have to think about (eye movement) before. Totally wrong.

2. Dynamically changing UI screws location memory

The idea of changing the user interface based on people’s eye movement is even more absurd. Location memory is in the center part of user experience design. Human brains remember where things are and  it makes it easy for them to find it next time they want to use it. Dynamically changing where all the buttons and other UI elements are? User will become utterly confused as where things are.

3. Eye-tracking as data gathering tool is creepy but useful

So what is the better way of using eye-tracking technology? Simply put, using the data only. Quietly gathering eye movements data without messing around the UI, and then use the gathered data for better profile building, ads targeting etc. is actually a solid idea. Before, all the profile building technology stops at search and clicks. Google knows what website you clicks or searches, that’s how they build their targeting ads system that rakes in billions of ads dollars. But what if they can know which part of the screen get the most eye-balls? It’s definitely a step forward, both on precision and creepiness ironically.

Since camera has become so ubiquitous now, technologies like facial recognizing, eye tracking, gesture tracking will trickle down to our laptop and smartphones. Give or take, welcome to an era of new interactions.

UICraft: Rethinking Touch Screen on Laptop

Recently Microsoft and Google all release their own laptop with a touch screen. People start to speculate that this is the next big thing in tech industry. As a big fan of product design, user interface and touch technology, this is a very intriguing topic for me, so I went ahead and did some research. Here is what I found. Again, quick takeaways if you don’t have time for a deep dive now.

Rethinking-Touch-Screen-on-Laptop

Tablets and smartphones have become very popular lately. It’s so popular that touch as a new interaction paradigm has forever changed how people interact with their devices. Technology has never been so intimate and intuitive to normal users. There is something for you no matter you’re 8 years old or 80 years old. People start to think, if touch is so great, why not bring it back to our PC/laptop? We want to touch everything on the screen! Yet, before we get too excited about the idea, there are some challenges we need to be aware of and address carefully.

1. Laptop UI needs to be touch-optimized for the entire ecosystem

Touch works so well on tablet and smartphone because the OS is designed from the ground up to be touch-based or touch-optimized. The buttons are  bigger so even the fattest finger won’t have any problem touching it. The information architecture is flatter so everything is more discoverable. New interactions like pull to refresh, pinch to zoom are invented to enhance the experience.

iPad_multitouch

Image Source: Apple.com

But what we take for granted on a touch-based OS is not there yet on our laptop. The laptop OS is not designed with touch in mind. They were designed in the early days when mouse and keyboard is still the ‘new paradigm’. All UI elements are quite small since mouse cursor has very high accuracy. As people’s major machine for work, the softwares’ UI are designed to have 10 toolbars with 100 buttons on it, just to increase efficiency. Like this:

microsoft-word-toolbars-crazy

Image Source: http://blog.vlad1.com

To make a traditional laptop OS ‘touch-optimized’ is a more complicated job (making UI elements touchable, supporting sophisticated touch gestures, just to name a few) than just draw an equation between ‘touch’ and ‘click’.  It also involves the entire ecosystem, not only the OS itself. Software developers all need to implement the design upgrade. And if this challenge cannot be tackled, the touch experience on a laptop will remain ‘underwhelmed’ to users come from tablet space and ‘confused’ to the those only familiar with desktop computers.

2. Frequent inputs demand minimum interaction cost

Let’s face it. Your laptop is more and more becoming a content creating only machine. It’s really not optimized for content consuming these days. And we all know that content creating involves a lot of user input, be it entering a paragraph of text, making edits in spreadsheets or draw a vector in Photoshop. The users need to interact with their laptop to get the job down. And all interactions, my friends, come with a cost.

For touch, the biggest cost is that you’ll have to move your arms around. Since the tablet or smartphone are used mainly as a content consuming device which don’t demand a lot of user interactions, it’s still OK. But laptop is a content creating device. Frequently moving your arms around, and you have the ‘gorilla arm’ problem. Working for 8 hours and you’ll definitely felt arm sour or even ache. It’s not like moving inches using your mouse after all.

Vertical-Multitouch-300x164

Image Source: Wired.com

3. Arm travels need to be minimized

Touch involves arm travel. The bigger the screen, the further arm will have to travel to get the job done. We can grade the extent of involvement by how many joints one has to use to perform certain level of touch interaction.

Single Joint (Smartphone): Finger joints. Very comfortable, one hand operation.

Double Joints (Tablet): Finger and wrist joints. Still comfortable, but user has to hold tablet now

Triple Joints (Laptop): Finger, wrist and elbow joints. Not comfortable, gorilla arms.

Entire Arm (Desktop): Finger, wrist, elbow and shoulder joints. Very uncomfortable, only viable for special case.

The more joints it involves, the harder it is to perform a touch interaction, and the worse the user experience. Laptop screen size ranges from 11 inches to 19 inches. User will have to use up to their elbow joint to move around the screen, and if they are doing interaction intensive work for 8 hours? Well let’s just say they are no ‘Iron Man’.

iron man

4. Greasy screen issue

Greasy screen issue is not a laptop only issue. Tablet and smartphone also suffers from it. But user’s expectation is different here. For smartphone and tablet, people are putting fingers on it from day one, so it’s not a new issue for them. Also since the screen is smaller, the grease or finger prints aren’t too obvious, while for the bigger screen on laptop, they are easier to spot. Yes, users can use some laptop detergent kit to clean the screen, but it came nowhere near the convenience of rubbing the screen clean on user’s jeans, right?

5.  Need scale to lower touch screen cost

Cost difference is another important factor.  Even if touch is a compelling feature on laptop, if the cost increase is too much, people may not want to pay for it. Currently a touch screen based laptop cost 120$ to 150$ more than its non-touch counterpart. This will become less of an issue when the economy of scale kicks in, but it’s extra investment that OEM needs to put in to make things happen.

 

What are the ‘big boys’ doing?

apple-logo

                            Apple – The Seamless ‘Migrator’.

Apple’s approach on this is a bit on the ‘conservative’ side. Simply put, their strategy can be described as ‘Incremental Migrate ’. They are the first to introduce multi-touch interface and iOS is still the best mobile OS in terms of user experience. If we look at the recent evolution of their laptop Mac OS X, a lot of the UI changes (Mission Control, Full Page Swipe, Pinch/Double Tap to Zoom, etc.) are the mobile UI paradigms trickling down to laptop OS. Apple is addressing the OS ecosystem UI challenge incrementally, by introducing touch features into laptop one at a time.

On the arm travel distance challenge front, they have introduced a lot of multi-touch features leveraging their upgraded Magic Trackpad. User still only need to move their finger joints, yet enjoy most of the benefits multi-touch has to offer. They are slowly educate their laptop users, preparing them for the ultimate jump (full touch) that’s to come.

 

new-microsoft-logo-600Microsoft – The Heavy ‘Committer’

Contrary to everyone’s expectation, this time Microsoft is leading the industry and taking a big leap forward bringing touch to laptop. Their new flagship OS Windows 8, leverage its unique and sophisticated Modern UI, is a fully touch-enabled OS. User that don’t want to use touch can still switch back to Windows traditional UI. It sounds quite rosy, but people actually used the Surface Tablet running Windows 8 reported that it’s confusing and hard to use.

It seems that most Windows users are not ready for full-fledged touch OS yet. They are still learning to walk, and Microsoft already starts to run.

 

Google logo transparentGoogle – The Light Water-Tester

Google is not known as a hardware manufacturer. Yet lately, they are more and more involved in  hardware products. Case in point? Their Nexus line and Chromebook initiative. Recently, Google released their new Chromebook Pixel product, featuring a very nice touch-enabled Retina display. From the product reviews, Google hasn’t do any touch-optimization on the Chrome OS yet. It seems to me they are using touch as only an ‘enhancement’ to the browsing experience. They are just testing the water here. 

 

Summary

How the innovation landscape will shape up around laptop touch screen is yet to be revealed, and you’ll never know what will happen next. But the idea itself, barring all the challenges it faces, is still interesting and has great potential. Which direction do you think it will go? Among Apple, Microsoft and Google, who do you think has the best chance of success? Leave a comment and let me know!

Google Glasses UI Evolution : Makes Life Feel Like Playing a Game

Google’s first Project Glasses video stirred a lot of controversies because of its UI design gets in the way of people’s normal life. You really can’t use this gadgets in real life if the user interface is so prominent, in the middle of your view, and pop up all the time, like this:

Project-Glasses-1

It could even be dangerous when driving or biking. Yeah a map is good, but only if I can actually SEE the road!

Project-Glasses-2Today, Google releases another teaser of the highly anticipated gadget, called ‘How it Feels (through Glasses)’. This time, Google’s UI actually get a total re-haul. All the UI are only limited to the top right corner of your view, getting out-of-the-way.

google-glass Also there is a subtle transparency in it, which reminds me of ‘Iron Man’.

ironmanAnd since I play games a lot, I just can’t help but relate this to some of the game’s HUD (Heads-Up-Display) UI:

Starwar UIWatching the video, I totally felt like living other people’s life, first person viewpoint. This could be totally amazing. We already have Twitch.tv where gamers broadcast their gameplay for others to watch. How far are we before we can broadcast our real life using Google Glasses?

Project-Glasses-3

Fujitsu’s Senior Smartphone Debut : A Falling Leaf, A Coming Fall

stylistic_s01_front_frFujitsu recently launched its first Android based smartphone with France Telecom. I know there’s nothing ‘exciting’ to blog about, but there’re some serious implications from it, just like people can tell the fall is coming from the falling of a leaf. 

1. Accessibility to a whole new level.

Every UI/UX designer should take accessibility into consideration these days, but in most cases people do it just to conform to regulation requirements. It has never be in the center of the design stage before. But by choosing to release its first smartphone as a senior oriented phone with unique features and user interface, Fujitsu made a serous commitment to accessibility, from regulation abiding level to business sell point level. There are cold numeric business calculation behind it yes, but it’s still heart warming to see seniors are targeted and well thought out designs are making their use of smartphone much easier. Seniors want a piece in the mobile trend also!

2. Android OEMs start to tap into niche market already

This is something where iOS ecosystem is lagging behind actually. Don’t get me wrong. iPhone is still very popular and I’d even say it’s still main stream and leading the innovation. But on niche markets, they are not making much progress. Reason? Simple. Because Apple is but ONE company and they release but ONE phone per year. This is a pretty hard limitation. Yet for Android, there is always your ambitious ‘new comers’ want to do something different to strike from different angle, thus the senior demographic targeting Fujitsu. If you ask an elderly which phone he will use, a dedicated designed senior phone or iPhone with some accessibility enhancements. I don’t think the answer will be too hard to guess.

3. Flexible UI Themes for iOS to close the gap

Yet hope is not all lost for iOS ecosystem. When Steve Jobs first release the iPhone, one notion he brought up in his keynote about why traditional handset OEMs did wrong is hard keyboard. He claimed that what hardware can do on one thing, software can do equally well on the same thing with one hundreds different ways. And that leads to the rise of mutli-touch technology and touch screen becoming the ‘de facto’ choice for phones just because it’s so flexible.

Along the same line, the user interface potential for iOS to evolve and become more flexible to address more niche markets are huge. For example, by introducing different user interface design tweaks as different ‘themes’, your iPhone can actually look and feel like a senior phone, or enterprise phone, or kid phone. At the center, it’s still iOS, but on the user experience level, it can be optimized for different purposes.  This has been the strength point for Android from the very beginning, ability to tweak the interface, and iOS do need to play catch up.

A good start of this would be introducing ‘Dashboard’ of Mac OS into iOS. Put all the relevant information and widgets on top, so the ‘update hungry’ users can quench their thirsty in one glance. I’ll try to write a separate blog on this in the future. 

All in all, a move to make dedicated device for older guys is always welcomed, and I had a feeling that we’ll see more of these kinds of dedicated devices in the future.

Mailbox App’s Reservation System UI: Progress Indicator At Its Best

As a fan of GTD(Getting Things Done), a sufferer of email-overload and a User Interface enthusiast, when my friend Drew Wilken informed me of this new ’email killer app’, I dropped everything on my hands and hit the ‘App Store’ icon on my iPhone5, and downloaded the highly hyped app. I gotta have it! One minute and 37 seconds later, I hit a cold hard wall looks like this:

mailbox waiting step 1

Am I furious about this, you ask? For a second, yes, but when I look closer, my feeling toward the app quietly changed. Let me tell you what happened.

  • Two sides of the same coin

When I first launched the app, I was greeted with a big welcome screen tell me I can’t use the app just yet. I need to wait in line for the system to gradually rollout. And my position is displayed on screen with huge blue numbers: ‘757,962’. What? There are  hundreds thousands of people before me? What a disappointment! Wait a second, what’s the smaller gray text beneath? ‘8268 behind me? Hmm… That feels better…’

mailbox app startup step 2

I believe a lot of people share the similar feelings when getting in line for Mailbox’s developer Orchestra to slowly roll out the app. To ease the pain of waiting, the progress indicator in the waiting screen is carefully and cleverly designed. By showing both the people ahead of you and the people behind you, the design gives you a feel of where you are, but also a feel of how much you have progressed (though the smaller gray ‘People behind you’ number). Pain is more bearable when you know you’re not the only one that’s suffering.

  • Joy of the flipping numbers

Another intriguing detail is when you leave the app for a while and come back, the two numbers will get updated accordingly, with a cool animation of flipping numbers you’ll usually see in a count-down clock. It really creates a feeling of ‘boost on progress’, which is kinda addicting. I found myself come back and check the app every 30 minutes or so just to see the numbers flipping. (‘I ascend!’) After the initial update, the number will still flip when it gets a new update, but much slower, leave people in the real waiting.

  • Designed outlets for impatience 

People get bored quickly when staring at slow turning numbers. Soon they want to do something to change the situation, or check something for distraction. This is where the well designed three ‘impatience outlets’ come into play. Beneath the numbers, three icons are displayed:

mailbox waiting step 3

‘About’ will tell you what the app is about, why you need to wait.

‘Status’ links to an article on developer’s blog explaining in more details how the rollout is handled and how long should user expect to wait.

If you’re still unsatisfied, there’s the third icon ‘Discuss’ which will lead you to the Mailbox app’s Twitter accounts. You can vent or check other people’s vent (or success cheer). Spread the word while add to the hype. (Maybe this is why the app is so hyped)

  • Yes. I dare to hope.

Now you see why I’m not furious at all. Actually I had more hope and confidence in the new app. If the designers in Orchestra would put so much thoughts into a simple waiting page to smooth out the launching process, it shouldn’t be hard to imagine the standard they’ll hold for the actual app. Now I’m really intrigued to see the app’s user experience. I’ll write another blog when my waiting is over. Stay tuned.

What’s your experience with the waiting or the app itself? Leave a comment and let me know!

Edit: It seems good design tends to go viral. Hot calendar app Tempo also assume the similar reservation system and even UI after an initial crush by demand. Here:

Photo Feb 19, 3 34 02 PM

Skeuomorphism vs Flat Design II : Evolution

Skeuomorphism as a design approach is under a lot of heat now. Mostly triggered by Apple’s contribution to it in its iOS and OS X design, as well as some ‘infamous’ apps (‘Contacts’ for iPad for one) that get things wrong. People embraces the benefit of familiarity it brings to the design, but doesn’t like it when it gets in the way or being fake. Some blame skeuomorphism for the disparity between iOS hardware and software, suggesting a total overhaul of iOS UI is necessary and cheered when Jony Ive took the position of both UI and Industrial Design lead in Apple. Yet we still see Dribble’s ‘Popular’ page flooded with tons of skeuomorphism works. Where are the future heading? To know better, we need to look back and find out where are we from.

 

1. Day One

tumblr_md5a9hLBqm1r2v2xso1_400We’ve come a long way on user interface design. 30 years ago, when MS-DOS is first released, we have but the green characters and the blinking cursor on-screen to play with. User experience is out of the question, people were still getting excited about the simple fact that PC can help them do tasks they would have done it manually before. Functionality, is the key world for this era. ‘GUI’ is not in any nerd’s dictionary just yet.

2. GUI – Skeuomorphism’s first début

Then came the GUI (Graphic User Interface), first developed by Xerox, get applied by Apple to its Macintosh computer, then Microsoft follow suit and released Windows.

Everything changed.

A new page on user interface design opened. As enthusiastic as using the command line was to nerds, it’s still more comfortable to see all the graphics. With the great success of Windows operation system, computer for the first time belongs to the rest of us, and GUI helps a lot in making it happen. It makes it possible for the normal people to be able to use a computer. Skeuomorphism is the hero in the time, for a curious yet not quite computer literate average user, being able to see a ‘calculator’ with the shape and function similar to its real world counterpart, people felt more comfortable using it.

290px-Windows_3.11_workspace

Calculator program for Windows 3.1

3. Before iPhone

GUI keeps developing over time, more and more people starts to use computers, more and more designers as well as developers put their efforts into making more useful and beautiful software. Windows as a platform won the PC war and dominated the market. Apple holding their ground with its uniqueness in design and extremely polished and user-friendly products, waiting. A lot of innovations happened at the time with Google leading search and Facebook leading social network. Both of their product featuring a ‘flat’ design and their engineering focused culture. Beautiful design are hard to find, people are like in the dark, waiting for something emerge from the horizon like the first light.

Google

Google’s ‘Flat’ Search Page

4. Post-iPhone Era

Then came the iPhone in 1997. The multi-touch design totally changed the landscape of user interface. ‘Mobile First’ became a lot of companies motto, big or small. This is a wave bigger than PC. Solid hardware performance, big screen with multi-touch UI and state-of-the-art OS put together, iPhone forever changed how people get information, communicate with each other and entertain themselves. Apple’s many years expertise on design and user experience finally get noticed by the main stream. People started to talk about how beautiful Apple’s UI looks, how smooth the interaction feels and how intuitive all though multi-touch gestures are. The prevalence of iOS drive up people’s expectation on user experience. Products can no longer stop at ‘it works’, they need to be ‘it JUST works’, and at the same time ‘looks stunningly beautiful’ to even compete. Good designers became very popular in the job market, most of them doing their dream job. Things just can’t be better for them.

iPhone-Evolution

iPhone Evolution

5. Overshoot

on-off switchThen like always, things overshot. More designers began to churn out ‘beautiful’, ‘realistic’ designs. Some with deliberations, some don’t. When heavily application of textures, shadows, gradient appears on every website, every mobile apps, every corner of people’s mobile phone screens, people quickly get aesthetic fatigue. All the weakness of skeuomorphism emerged. Too many gradients makes the interface look ‘tacky’, heavy textures competing attention with the content user want to see, design look like a real world object but functions totally differently, all these add to the ‘sin’ of skeuomorphism. Even skeuomorphism itself is not bad, the mis-application of it definitely ruined the day. People starts to pursue a clean, simple, no distraction experience. This is where we are now.

Future?

We’ll know better of what future is after we know better of the history. Now we’ve ‘relived’ the entire ‘Skeuomorphism Saga’, I think the answer become quite clear for us. The future will not be all skeuomorphism, or plain out flat design, or anything in between. Those are trends. Trends tend to come and go with new technologies, new business models. But the simple yet timeless design principles will always stay with us. As long as we follow the traditional wisdom of design, adapt it with new context, we’ll always come up with great designs. We’ll experience the same old hard-working, the contemplating, the tough decision-making. We’ll also embrace the joy of creating, the deep satisfaction of knowing we finally get things right.

This is a blessing to our designers. This is a curse to our designers.

UI of Twitter’s new ‘Vine’ app: Subtle Evolution

Recently Twitter released its new standalone short video sharing app ‘Vine’. It’s début isn’t without some controversies, but overall it’s a solid app with great potentials. All the dramas aside, I want to go ahead and do a bit of UI analysis on this hot social app, and see if we can find something interesting:

1. Biggest Screen Ever

Unlike the quite prevalent ‘5 Tabs Nav Bar’ design pattern other social apps have adopted, Vine doesn’t have a global navigation bar at all. It gives user the most screen real estate to display content, while UI gets out-of-the-way. Launch the app and you’ll see a video playing right away in loops, instantly immersive. Keep scrolling down and you’ll get end-less (literally) content, and there’s no bottom bar with 5 different icons to increase your cognitive load. The interface is clean and minimum.

Vine vs other SNS app

Notice that in above pictures, Twittbot, Twitter, Instagram all have the bottom navigation bar. It’s useful if user wander between these app sections a lot. But for a lot of users, most of the time they stay at their timeline viewing, thus the nav bar only gets in the way unnecessarily. Vine isn’t the first app to come up with this kind of ‘flat’ approach to content presentation. Path, which is another ‘intimate social network’ service, also shares the same ‘put content front and center’ philosophy.

Path Timeline and side menu

Path don’t have global navigation bar either, and they uses a side menu that’s hidden from the content panel, only revealed when the content panel slides to the right. Without the navigation bar, Path is able to keep the interface clean and display more content also.

2. Better Icon-Label Connection

Again using the picture above as an example, it’s really hard if not impossible to figure out what those little navigation bar icons stands for. Twitter at least put the label beneath the icons (but it’s very small, hard to read), Twittbot and Instagram only use icons, thus users will hesitate and ask themselves what those tabs are for before touching them. As we all know it, making users stop and think = bad user experience.

4 Section Design

Vine uses a drop-down menu to switch between app sections. In the menu, pretty and sizable icons are displayed along with the section name. When user gets into the respective section, the icon will stay on the top left corner, and the title will be in the middle of the title bar, further strengthen the connection.

3. Making ‘Like and Comment’ Easier

People are comparing ‘Vine’ with ‘Instagram’ by claiming ‘Vine is the Video Instagram’. They do have some resemblances in UI design. One case in point, they all use a ‘Like’ and ‘Comment’ button for the viewer to leave feedback. The difference is size, where Vine’s buttons are bigger than Instagram, which makes them more ‘touchable’, encouraging people to express their opinion, further foster the social part of the app.

Like & Comment Button Size

4. Curated ‘Explore’ Page
Exploring is an essential part of  social sharing apps. Whether the application can help user find the content they want will determine how far an social media can go.
Curated vd non-curated
As we can see from above pictures, Vine’s ‘Explore’ page has ‘Editor’s Picks’ and ‘Popular Now’, along with 12 most popular or interesting tags, this will cover a lot of ground already. Instagram, on the right side, only list photos that are currently popular. It’s more direct, but also due to the lack of sophisticated algorithm, the results as we can see, are quite random. User will have to input tags they want to search to get access to it, which is not very convenient.

5. Some flaws?

During the review, I also found some design hard to understand. For example, it is a video sharing app, but the only way you can capture a video is to go to ‘Home’ and touch the top right corner icon (no labels either). For such a prominent function as creating video, this is a bit too modest. Maybe Vine’s design team think this app as more of a major content consuming app than a content creating app I don’t know, but if making a video is not as easy as taking a photo, this will hurt its subscribers growth. Video is harder to capture and thus needs more love from UI/UX.

To Sum it up

Overall, I felt the application’s UI and UX is carefully designed. It’s not as sophisticated as Twitter, or as fancy as Path, but it gets the job done very efficiently. The UI gets out-of-the-way as much as possible, people will not have a hard time finding their way around because it’s just not that many layers worthy of the term ‘Information Hierarchy’. Everything is quite buttoned up. It’s simple and even ‘shallow’. (Interestingly, some say the early contents are also ‘shallow’, but addictive.) But simple can be powerful, and easier to get viral, which is critical critical for a new social service.

Skeuomorphism vs. Flat Design: Some Inspirations

The design industry is rethinking Skeuomorphism lately. Whether flat design is a more appealing approach or Skeuomorphism is still  in its prime time.I was reading all those arguments and think to myself: Maybe they can work hand-in-hand instead of mutual exclusive? So I went out and did some inspirations search. The results are encouraging, not exactly proved my point but still offer a possible direction, here’s what I found:

1. Tiny Tower

Tiny-Tower-Level-Upgrade

‘Tiny Tower’  is a mobile business simulation game developed by NimbleBit. It’s 8-bit ‘Pixel Art’ style created a new genre on game graphics. Look at the above picture closely, you’ll find there are some little ‘glow’ effect on top of the arcade machine, and some strong shadow on the wall from ceiling down. So the art style is 8-bit pixelized and very 2-D (flat), but it also has some shadows, glows and subtle textures (which all add up to the chrome just like skeuomorphism design do), to create some depth and visual appeal.

2. Minecraft

lonely_night_in_minecraft__by_xmax247-d5ksm9y

Minecraft’s graphic design is ‘crude’. The entire world is built by all the little square blocks. Yet, if you put up some torches on the little hut you just built at night, you’ll find a very cozy orange glow around the torch. The glow is totally not ‘crude’. Another good example of combining lo-fidelity ‘flat’ elements with subtle hi-fidelity effects.

3. Fez

Fez-08

Fez is another platformer game using pixel art style. The game play is quite unique. You are a 2D creature that performing all the jumps and climbing in a 2D world, but you can change perspective, which will result in a 90 degree turn where a 3D world is revealed to you.(See picture above) The visual is 2D, but the interaction and the more dynamic part of the design is 3D, which offer another new approach.

4. Path

Path-UI-Style

Path is a perfect example of the strength when you combine flat and simple UI elements with subtle textures and effects. They really get it right and have the best of both worlds. The title bar is very subtly ‘textured’ yet still looks very clean and digital.(Upper part of the picture) The ‘Flyout Menu’ (red circle with ‘+’ or ‘x’ int he middle) has a very light ‘glossy effect’, but all the other action buttons are represented by flat circles (Middle part of the picture). All the emotion icons are totally flat though. (Lower part of the picture) The overall design language is flat for sure, but they spice it up with some textures, shadows, glossy effects here and there without breaking the clean look and feel. Really a marvelous job done.

5. Clear

Clear_swipe

Clear is the app that pioneer the ‘movement’ from skeuomorphism to flat design. But even Clear has gradient in it. It also support different themes, so if user get bored with one color scheme, they can switch to another one that they like.

Photo-Feb-06-5-17-49-PM

Image: By TheNextWeb.com

Also, Clear’s static visual design is flat and simple, its interaction animation is very interesting. For example, to create a to-do item in the middle of a list, user can simply pinch apart the list where they want the item created, then the list will unfold like a folded paper. It’s 100% skeuomorphism in action, drawing reference from real world experience of childhood paper-folding.

To Sum it up…

Skeuomorphism and Flat design are all but two different design languages. Each has its strength and limitation, and will fit into different scenarios to solve design problems. There’s no absolute right or wrong about using them, it’s just how well it fits into the problem you want to solve and the audience you want to please. And be creative! The above examples proves that you can use them both and still yielding fascinating results!