Yahoo! App Mobile App Design Teardown

  • View
    105

  • Download
    1

Embed Size (px)

Text of Yahoo! App Mobile App Design Teardown

  • APP DESIGN TEARDOWN

    PRODUCTDESIGNPRO.COM PRESENTS...

  • HOW THIS WORKS

    Im going to walk through two common things a user would do and share my insights as a mobile app designer.

  • Yahoo, my old friend.

    How have you been? What have you been up to?

  • Ooooh whats More? Im intrigued by your app name

  • In-depth? Not exactly what I know Yahoo for. They have more of a reputation for lifestyle and click-baity pieces, but well see.

  • Solid rating at 4.2 with 149,000 reviews.

    TIP

    When looking at apps as a designer, I always read reviews because it gives you a real sense of whats working and whats not working, regardless of how beautiful the app is.

  • The breakdown of reviews is great! Lots of people really love it. Bravo!

  • Wow! Yahoo is replying to feedback.

    This is one of the best ways to learn from your users, and make them feel heard and loved. All anyone wants in life is to be known.

  • SCENARIO 1

    Getting my mid-morning news fix

  • AFTERNOON LULL

    Time to see whats going on in the world. Ill check Yahoo.

  • Ah. Beautiful! This is relaxing.

  • Hm its beautiful, but is it weird that the weather is here? I guess it gives me a sense of my day However, when I read the news Im looking outside myself for a sense of the day.

    Maybe Im being a bit too philosophical :)

  • Nice way to upsell into their other app by showing a snippet of its value front-and-center, and then offering more full features if you download the app.

  • Im bummed this is the top story of today. Lets see what else there is

  • Wow, Its as easy to scroll quickly through my news as it is to read Instagram. Its a familiar Instagrammy UI, too.

    TIP

    Its good to *ahem* reference UIs from popular apps because then your users will be familiar with the interaction patterns.

  • See?

  • Just noticed these tabs. Theyre subtle enough that they arent distracting. Its clear that I can tap or scroll to move to different sections.

  • I dont really care for celebrity news, I wish there was a way to quickly remove stuff from my All Stories feed.

    I bet there was a prototype built where you could swipe to get rid of stories and customize your feed. The problem with that is that then you cant swipe to navigate between sections. So, navigation is more important than customization.

  • Well, lets just go ahead and read that top story.

  • The priority here is clearly reading. Theres no action bar with navigation or actions like comment or sharing. Thats below.

  • This is really easy to read, typographically. It reminds me of USA Todays recent rebrand.

  • Instead of an action bar or other button, it relies on android buttons to navigate back home, which is thoughtful. They saved some screen real estate.

  • Looks like the second time we see a place to comment

    I wonder if some people just jump straight into the comments without reading the article.

    Could Yahoo reduce trolls by putting comments only at the end of the article?

  • This view was super fast to load, and I can see why. Its just text. I like that there are just headlines, no pictures.

  • Nice placement of related story. The CTA is explicit, which likely converts better.

    NOW WATCH OR ELSE!!!!!!!!

  • Hm okay, so no navigation makes this super clean, but Im left wondering...

    How do I get to the next story?

  • Got it. Swipe!

    There could be a tip encouraging me to swipe the first time I got to the end of an article, or ever right after I land in my first article.

  • Again, I wish I could let the app know that I want to see more articles like these. Maybe by tapping Society...

  • Society

    + More

    Less

    Always hide

    Something like this could pop-up

  • OK, back to business. Lets swipe to see the next story...

  • *Ah! A Wild Ad appeared!*

    Hm, and visually its a little wonky. Add some margin, guys!

  • Visually, I really like their little sponsored icon. I recognize it from Tumblr. Its playful, and takes the edge off the fact that its an advertisement. It says Im an ad! But at least Im honest

  • The CTA is weak. Earn more or Apply now or Get more miles would probably convert better.

    OK, lets keep swiping.

  • Cool. Looks like I can pop this out somehow.

  • LOL. swegway

    Gotta share that!

  • Good placement of the share icon, right by the sweet-spot for my thumb.

  • Read more changes into Read less and stays in place. Its useful if I want to look at the whole photo again. It makes it easy to go back and forth between reading the description and viewing the picture. I also like that the full description only covers a little bit of the photo and then creates a scrollable region. Great design for scale choice.

  • At first I thought Why not use dots to show pagination? and then I realized why this is a much more scalable design solution.

    Imagine you have 23 photos.. you cant fit 23 dots across the bottom. Text was the better choice.

  • OK, lets get back to all the stories.

  • Classic Yahoo News headline.

    Lets swipe right to change topics.

  • Swiping through these sections makes it easy for me to quickly get an overview of whats going on in each category of life, and then deep dive when I find a topic that I care about.

    I imagine that this is nice for people who like browse, but my guess is that most people only really care about a few topics.

  • Having such a long list of topics also has some other issues...

    Havent we seen this story already?

  • Which brings me to our next scenario...

  • SCENARIO 2

    Customizing the app so I dont have to bother with the topics I dont care about

  • Inspired by this bit of feedbackand this awesome response

  • SATURDAY MORNING

    Ive used the app a few times, and am committing to using it regularly if I can tweak it the way I like it... Lets make it mine!

  • Theres really nowhere else to look for settings other than the menu Lets take a look.

  • Great! I can edit the categories that show up.

  • An idea Ive expressed earlier is that the categories reorder based on how much time you spend reading each one.

    ie when I primarily read Yahoo Beauty, it becomes my first section.

    The downside is that there might be unpredictable ordering and re-ordering, and that would be super frustrating. A way to remedy that would be to ask before reordering anything.

    It looks like youre reading a lot of Beauty, make it the category you see first?

  • Anyway, lets edit these

  • What a wonderfully simple UI. Its clear these grippies help reorder the sections.

  • Actually, maybe too simple?

    At first I didnt know what the checkmark meant. Also I didnt know if it was checked or not. I would recommend just using the standard checkbox component to make it clear these are checked.

  • Clearer, right?

  • Ill re-order these in the order I want to read them in by dragging them around...

  • Well, that was easy and clear. Success!

  • THANKS!

    Learn more about Product Design at www.productdesignpro.com