Yahoo! Weather Gets One Step Ahead by Working with Apple

It has been a month since I chose Yahoo! Weather app as my default weather app on my iPhone. I liked the UI style of the app, simple, information matter on the front and center and the pretty Flickr local scenery photos, all with good touch. After WWDC 2013, it turns out that this app fits right into the new iOS design. Is Yahoo!’s designers THAT good? Or they can see into the future?

The question became very obvious right after I delve myself into Apple’s ‘out-of-the-oven’ Mobile Human Interface Guideline (can be found here, need to have developer account to access):

Yahoo-Weather-before-afterr

Since iOS default weather app actually use Yahoo weather, I think designers in both companies must have talked before releasing their version of the weather app. Good for Yahoo! I’d say. And maybe in the future if we want to get a sneak peek into iOS changes, we could pay a bit more attention to Yahoo’s weather app?

 

Advertisements

What Exactly Apple Did with iOS 7?

icon-ios7

So the biggest announcement in tech industry is behind us. Yesterday in Apple’s WWDC 2013, the new iOS 7 was released to the public. My feeling towards it is a mixed bag. I liked the simplicity of the new design language, but not a big fan of the somewhat ‘childish’ app icon colors. I’m excited about the huge potential of iOS for cars (which deserve another blog), but not so keen on the Control Center. When all the excitement and disappointment quiet down, I tried to put all the pieces together and wonder what exactly Apple did on iOS 7?

Here is what I found out:

1. Stronger Design Rules

  •  Grid system:  As Jonny Ive put it ‘Developing a grid system allowed us to achieve a much more harmonious relationship between individual elements‘. A well designed and implemented grid system will hugely improve the inner relationship between scatter around UI elements, thus making them feel like part of a single piece. This is essential in ‘flat design’ that iOS is obviously influenced by.  Not that iOS 6 is designed without a grid system, it’s just that the previous ‘skeumorphism’ UI style give ample affordance and visual clue, thus a grid system’s importance is not as critical as a simplicity centered flat design.

ios7_grid_system

 

  • Redesigned color palette:  Anyone familiar the old iOS will find the new one way more colorful, to the extent of making some uncomfortable. These colors come from a re-designed palette that go well together. This actually reminds me of when iMac is first introduced to the market. The beautiful neon colors really capture a lot of attention. Some would say the new look of iOS is actually childish and will hurt its image of a professional device. I tend to disagree. There is nothing wrong about being colorful, being bold as long as it’s still well thought out and designed to please human eyes. iOS color has been dull for soooo long, and it’s time for a change.

ios-7-palette

 

  • Dynamic UI that get out-of-the-way when not needed:   Nothing can be said better than Apple’s own terms, and forgive my laziness of directly quoting them here: ‘The interface is purposely unobtrusive. Conspicuous ornamentation has been stripped away. Unnecessary bars and buttons have been removed. And in taking away design elements that don’t add value, suddenly there’s greater focus on what matters most: your content.‘ Also a ‘flat’ UI make doing this easier, since all the elements are mostly colorful geometric shapes, it won’t hurt the snappiness of the UI as badly as a ‘unwieldy’ heavy textured UI.

2. Industrial Design and UI Design Integration

This has been criticized all along. People complained about the minimalist industrial design of iPhone doesn’t match the ‘skeumorphism’ style UI. Now it seems with the iOS 7, they are start to come to the same direction: Simplicity. One good example is the layered effect iOS 7 trying to create with the use of translucency. It might look very subtle, but it means a lot. It makes your iPhone felt more legit and physical, more ‘real’. In heart, the new iOS 7 is still trying to be ‘real’, but it has evolved from ‘visual skeumorphism’ to ‘psychology skeumorphism’. After all, Apple is all about making technology human. Or put it in their own words:

“Technology should never get in the way of humanity”

ios7layer

3. More Mobile Friendly

  • Conserving Power: A big development iOS 7 bring to the table is to conserve power usage when the app is not in the foreground. No other company came close to how deep Apple dig to save the 1 minute of battery power.
  • Flat Design uses less CPU power, thus smoother: I bet the new iOS 7’s built-in UI image resource size is much smaller than iOS 6. To put it in layman’s terms: It has become leaner and faster. Exactly what mobile demands.

4. Character?

This is a vague feeling of mine. I can’t really put my finger to it. But the bold color, the subtle translucent layers, the smart UI that will hide themselves when I need to view my content, the smarter and more human-sounding Siri, etc. all give me a feeling that iOS 7 somehow come to life, has its own character, and evolved to be smarter and prettier. There’s a slice of humanity in it, no matter how thin it is. Maybe it’s just me day dreaming, or maybe this is also Apple’s vision?

BTW, the Apple official iOS 7 Design page is by itself a design lesson, I recommend going through it. It’s not just a sales pitch.

 

UICraft: Why Facebook’s New ‘Stickers’ is Stupid Yet ‘Sticky’

Following Path’s step, Facebook recently introduced a sticker feature in their messaging experience. Stickers are a glorified version of ’emojis’ which user can send to their friend while chatting to express emotions. It usually comes with a package of different expressions/emotions. All Facebook’s current stickers are free to download, but the ‘Free’ tag could very quickly become ‘$0.99’ like most Path stickers do.

Facebook-Messenger-stickers

 

Image via: phandroid.com

Stickers are no new creation by Facebook at all. A bunch of Asian messaging apps and services have already embraced it for some time. This whole ‘cuteness’ thing might seem silly, yet before you shout ‘stupid and cheesy!’, let’s not forget all the ‘stupid’ videos that got millions visits on YouTube. There is something behind all these ‘stupid yet popular’ fads. Most of them share one treats: They play very well to your emotion. And emotion, my friend, is usually our weakness. That is what’s behind all these impulse purchasing, all these ‘my brain tries to say no but my body screams YES’ moments, all those ‘this is so stupid but I just can’t stop laughing’ videos.

This is also why some  apps are successful in creating attractive experience. Enter ‘Clear‘, the highly successful to-do app with flat and simple visual but powerful physics and interactions. By swiping the item right, user can mark complete the task. Swiping left is delete the task, pinch open to add an item and pinch close to fold the current task list. It might sound simple, yet it’s physics is so great that when you are doing all these simple operations, you feel like you are manipulate a real object, you are throwing the completed task away like throwing your empty can of Coke to the dump. It relates to your feelings and emotions.

I still remember when the first time Apple released iPhone and introduced multi-touch, people are instantly amazed by the interactions without rationally knows why. Like Steve Jobs once put it in his keynote when demonstrating a multi-touch feature :” I can play this all day!’. As human-beings, we are sophisticated, we use our brains, we developed science. But most of the times, we aren’t that smarter when it comes to our emotion. We fall in love, get hurt, heal through it, and do it again. That just how emotion works. It is sticky and always comes back. No wonder after Path first announced their Stickers and In-app shop, they said the first week it brings in more money than all the money the company has ever earned before. No wonder Facebook is following suit.

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!

 

 

 

HTML 5 Development Cost Greater Than Native?

In the article from The Next Web: Accounting software startup Xero ditches HTML5 in favor of native iOS and Android apps

Our view is that HTML5 technologies can deliver as-good-as-native experiences…but the lesson from Fastbook is that it’s hard work – you don’t get those experiences out-of-the-box. And the lesson we’ve learnt over the last 12 months has been that the cost in time, effort and testing to bring an HTML5 application to a native level of performance seems to be far greater than if the application was built with native technologies from the get-go.

This surprises me a bit. One big reason for app developers to choose web app approach is because HTML5 is ‘cross-platform’, thus developers don’t have to deal with OS fragmentation and develop one version for each platform.

I guess this is due to immature of the ecosystem. By immature, it’s not just the technology itself, but also the developer talent pool as well as the tools and resources. We all know the ‘end-game’ for HTML5 is great, but to get there, there seems to be more hurdles than expected…

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.

Apple iMessage UI Breakdown: Read Receipts

Finally got time to write something that I hold dear and near to: User Interface!

Today I just want to start with a very ‘minor’ feature in IOS’s iMessage UI, the ‘Read Receipts’.

The ‘Read Receipts’ feature lets you tell the people who send message to you whether you’ve read the message or not.

imessage 02

If you set it to ‘Off’, your friend will see this:

imessage 03

Notice that under the text message ‘Test’, there’s a small gray word ‘Delivered’. This means your friend will know the message got delivered to you, yet not sure whether you’ve read it or not.

If you set it to ‘On’, your friend will have more information now:

imessage 01

Now notice that the gray small word is now ‘Read’, means the message not only get delivered, it also get read by you.

So what’s user experience design thoughts have been put into this simple little feature? Let’s have a closer look.

1. Give power user the freedom of control, but keep it simple for normal users.

This ‘Send Read Receipts’ setting is by default turned off, which means most user won’t even aware of its existence. Most user don’t want to think too much of all the ‘fine tweaks’ they can do on their mobile phone. They want to just pick it up and start using it. This setting design does exactly that. A lot of my friends using an iPhone don’t even know they can do this, and they’ve been using iMessage for a long time without any problem. For the power user, they can choose to turn the feature on, and they fully understand the meaning of it. (Not being able to use ‘I didn’t get your message’ as an excuse maybe?)

If it’s designed the other way around. Then normal user will start to complain ‘Why others can know whether I read their message? When did I allow that to happen? And where can I turn it off?’ This is bad experience because it makes user start to think, start to ask questions, and likely won’t get answer easily.

2. Display the information in a non-intrusive, out-of-the-way style. 

As can be seen from the above figures, the ‘Read’ word are gray and small. User can easily choose to ignore them if they only want to read the conversation text. Yet for user that want to know whether their message has been sent or read, the information is there. The visual hierarchy here is well designed.

3. Only display on the newest message to reduce screen clutter. 

Another subtle thing I noticed (but not shown in the above figures) is that only the newest message will have a ‘Read Recipient’ displayed underneath it. Come to think of it, it actually make a lot of sense. Older messages are either replied to or become irrelevant for user to know its delivery/read status. My friend has already replied all my messages I sent to him yesterday, so they definitely got and read all of those messages. The only message I want to know whether it’s delivered or read is the message I just sent. Designing this way instead of display ‘Read Recipient’ on each message has its pros and cons. The good thing is only the most relevant information is displayed, and much less screen clutter. The drawback is that user won’t have a message by message status information (which most of the users don’t care anyway). So I believe Apple make a deliberate decision (Remember design is all about making deliberate decisions for the user) to choose good experience for the 90 percent of the user, rather than sought thoroughness for the rest 10%.

So as we can see from the analysis above, even designing for a small feature like ‘Read Recipients’, there are a lot of design thinking behind it, and being aware of all the pros and cons of the different solutions and making the correct (yet tough) decision for the user is the key to great user experience.

Dropbox Pre-install on Samsung Android Smartphones: A new life for prearranged marriage?

Dropbox

Image: by Dropbox

Dropbox and Samsung today announced that some Samsung new top-of-the-line devices, like Samsung Galaxy Grand, Samsung Galaxy Note, etc. will come out with Dropbox pre-installed and deep integrated. These smartphone users that activate a Dropbox account will automatically entitled for a 50GB storage plan (for only 2 years though, check here). This is also a deeper integration than merely a preload, Samsung will use Dropbox as its option for cloud storage, and OS level tweak has will be developed to enable features like thumbnail to offer the best cloud storage service without hindering user’s data plan too much.

The first thing came to mind when I got the news is :’Wow, that’s a good deal! I wish my iPhone has this kind of deal!’. Honestly, a 50Gb upgrade will be so sweet for me. I’m a long time Dropbox user sitting on merely 2.5GB of storage. I really liked their service: Simple, out-of-the-way UI style, reliable and fast quality of service, well thought out and progressive mobile strategy(their cross-platform support for one). The only downside for me is the free storage they gave me is only 2.5GB, far from enough. They’ve always have the referral program that if you recommend one friend to use it, you’ll get 250Mb storage for free, that is a cheap and viral way to expanding their subscriber base,  now they seem to find another way to expose themselves to broader audiences.

Preloaded software/services are widely considered by the mobile generation as the ‘original sin’ from desktop ‘dark age’. True that we all had our ‘good’ time with the shiny new HP laptop we bought came with one hundred kinds of ‘printing software that make your life easier!’ vaporware out of the box. We all had bad taste in our mouth when stuffed with something we don’t like or requested in the first place. But a preload software isn’t necessarily a bad thing. If the preload software is a very useful one and has solid reputation, which will add value to the entire product offering, then why not? All in all, even Apple’s mighty iOS came with quite some preloads and people seems to be OK with it. (Apple Maps anyone?) Like a pre-arranged marriage, if the girl is actually quite hot and is everything you ever wanted, who cares it’s a pre-arranged one or not? You’ll jump without a second if she appears on your Match.com hunting anyway. 😉

I believe this is a win-win-win for all parties. Samsung will provide more value to their smartphone offerings. Dropbox will reach out to more people and develop more subscribers. (Samsung sold 30millions Galaxy S3 and Dropbox only has 100 millions subscribers or so end of 2012). And for our users, who wouldn’t love a 50Gb free storage space on all your computers and mobile devices?