58
[Launcher] The design principles behind categorized tags in App Drawer

  1. Gary C.
    OxygenOS Operations Staff Member May 9, 2018

    Gary C. , May 9, 2018 :
    Foreword

    Have you ever struggled to find the product you want in disorganized supermarket or corner store? Arbitrary classification of items and aisle order causes confusion for the user and lacks a clear order about what goes where.

    The same logic applies to smartphone apps, especially when there are a lot of them. How can we help users find apps easily and quickly?

    Identify the user pain point

    Let’s say you downloaded a very good app two days ago and want to recommend it to friends. However, you can’t remember the exact app name and where you saved it. You would have to tediously scroll through the hundreds of apps on her phone. Even if you have the foresight to set up app drawers, the process would still be quite troublesome.

    Clarify the design goal

    Once we’ve identified the true pain points of the users based on their request and requirements, we extract key information and clarify the design goal. The summary could look like this:

    When the user forgets the app name, it is troublesome to find it. So when they need the app, they don't know where it is.

    If the user has too many folders and the categories become messier, it is difficult to find the desired app.

    Therefore, the ultimate design goal is to address the issues in those two scenarios, and we need a better way to help the user look for apps.

    Design thinking

    We get inspiration from daily scenarios such as the one shared in the preface. People may not naturally set up an organization scheme that works on a long term basis. Systems with poorly thought out or nonexistent categories become a strain to use, snowballing as more items are added into their system.

    We can start from the following questions:

    If the user doesn't like to actively organize things, what can we as UX designers to help them do so? What capability can we implement into our system to actively help the user categorize those things? We want to reduce disorganization and help the user quickly find what they need through reasonable and appropriate classifications. In the end, our team came up with the solution of automatic classification tags.

    Even if the user completely forgets the app name, they can use their impression of the app's general type to look through the app tags. Users don’t have to manually create so many folders through our automatic categorization design.

    In developing app classification tags, we considered details such as whether whether to allow the tags to be moved, added, removed, customized and recategorized.

    Sketching our scheme
    upload_2018-4-26_15-19-7.jpeg upload_2018-4-26_15-19-17.jpeg

    Creating interactive prototypes design

    Scheme #1
    upload_2018-4-26_15-18-53.png

    We considered a direct classification design. Users can swipe left or right to switch between categories and long press a tag to adjust the tags order. It is also possible to manually create tags and add/remove apps to/from tags with high flexibility. These are just a few of the many screenshots we created.

    Scheme #2
    upload_2018-4-26_15-18-44.png

    In this prototype, the current drawer layout is not changed, and the category tags only appear when the user taps Search. This is because finding the app with tags is actually a type of search. The user can search for the app directly with the keyboard or tap the tag to find it. The user can tap a tag to switch to it, and long press it to adjust its order.

    Reviewing our prototypes

    Every Thursday afternoon, we hold a review where every team member can share their insights and opinions. In this case, scheme #2 was chosen as the final solution.

    The rationale was as follows:
    1. Tags are put in the search bar and work as a part of the searches, so they will not affect the users' habits. The tags are in line with OnePlus' overall style and design philosophy.
    2. Scheme #2 is unintrusive and imperceptible to the users when not in use. Users can use tags in this design with ease whenever needed.
    Getting user feedback

    After a stable version is developed, we start to test and validate it. During the closed beta phase, detailed questionnaires about user experience and installation packages are distributed in user forums.

    After they used this new design for one to two weeks, we summarized the issues raised by users and revisited the current design. We found that going with design scheme #2 was a good choice. It even slowly changed some heavy folder users' habits. As the system automatically performs app classification, the homescreen became cleaner and faster to use.

    Final thoughts

    Many design inspirations are actually derived from our daily life. Every design, from request, output to the final solution, needs constant adjustment and polishing. In this process, it's crucial to listen to the user's voice. That’s why our designs are always user-oriented.

    Welcome feedbacks about categorized tags: https://zh.surveymonkey.com/r/LM9DCL8
     
    Last edited: May 9, 2018

    #1
  2. dsmonteiro
    Community Consultant Community Expert May 9, 2018

    dsmonteiro , May 9, 2018 :
    If there's one thing I love about these forums, it's how much I've learned about everything that happens behind the stages to launch a smartphone.

    Thanks for adding a bit more knowledge to the mix. Can't wait for your next one!
     

    #2
  3. G_plusone
    Marshmallow May 9, 2018

    G_plusone , May 9, 2018 :
    It's nice of you to take efforts for better Organization, Easy access of applications and also explaining the process in detail to Us.

    Any future plans on Custom arrangement of Apps?
     

    #3
  4. Gary C.
    OxygenOS Operations Staff Member May 9, 2018

    Gary C. , May 9, 2018 :
    I have to apology for those manuscripts; they were full of Chinese words and especially the handwriting was so ugly. :astonished:
    we can draw an English copy for you guys, but we want to show you the "real" one during designer working.
     

    #4
  5. idkwhoiam322
    Nougat May 9, 2018

    idkwhoiam322 , May 9, 2018 :
    No problem! If it were my writing, people wouldn't have had a different reaction either :p
     

    #5
  6. dsmonteiro
    Community Consultant Community Expert May 9, 2018

    dsmonteiro , May 9, 2018 :
    Trust me, you'd find my handwriting far more hideous. :sweatsmile:
     

    #6
  7. B.yashaswi
    Ice Cream Sandwich May 9, 2018

    B.yashaswi , May 9, 2018 :
    Earlier the search bar was placed bottom of the right side corner which was very handy feature to use rather than reaching the search bar,Hope to see it back again and previously there use to be alphabets beside the scroll bar which made launcher look great, hope they will bring them back.
     
    Last edited: May 9, 2018

    #7
  8. youbi
    Portuguese POC Assistant Head Moderator May 9, 2018

    youbi , May 9, 2018 :
    Once again @Gary C. thanks for the great insight on how things get implemented and tested. Hope to see more of those coming. :p

    I agree, this would make it easier to reach since the top of the screen is always a bit far away and involves some more gymnastic to reach. :sweatsmile:

    As for the rest, the all idea for the launcher is quite nice and in the end, it really makes it less needed some of the home screen folders we used to have.

    But I do have to confess, old habits die hard so I still have a screen with those organized folders for my apps. I really need to evolve. :sweatsmile:
     

    #8
  9. the_reckoner
    Ice Cream Sandwich May 9, 2018

    the_reckoner , May 9, 2018 :
    I don't use the stock launcher only because of the horrible Android app drawer

    I use smart launcher only because of the app drawer

    If scheme #1 had been implemented and with the new double tap to lock screen I'd completely switch to stock
     

    #9
    iPhone5lol, Go_2_Sea and G_plusone like this.
  10. kaihp
    Jelly Bean May 9, 2018

    kaihp , May 9, 2018 :
    I don't see any reason to apologize: You are Chinese, so using Chinese characters to make notes is the obvious thing to do. It tends to be more compact than English too ;)
     

    #10
  11. jlasensiofi
    KitKat May 10, 2018

    jlasensiofi , May 10, 2018 :
    Cover the survey @Gary C. and thanks for the interest, as usual ;):)

    When I see these things, it is when you realize how complex everything is, and how often we complain without giving importance to your work. Congrats for the great job.

    Never Settle.
     
    Last edited: May 10, 2018

    #11
    iPhone5lol and Gary C. like this.
  12. duke491
    Cupcake May 10, 2018

    duke491 , May 10, 2018 :
    The theory behind the evolving schematic was evident without the need to use a specified language, good job done by all but on a personal note I would like the use of the alphabet on the side aswell as the tags but as all things new they take a little getting used to, thanks again for the inside info let's see more of this type of detail regarding updates etc.
    Perhaps you could start a thread called "Inside Out"
     

    #12
    iPhone5lol and Go_2_Sea like this.
  13. cdnfarmer
    Jelly Bean May 12, 2018

    cdnfarmer , May 12, 2018 :
    This concept looks really good. Having worked in information management for an in house software developing company, many concepts that you mentioned are key. It brings back good memories. It's a lot of work and organization requires experience and foresight or planning which is not always obvious. I like the tags because it create a lot of flexibility when organizing apps even documents or files in general. There has been a trend to applying tags over the years and it's really neat to see OnePlus implementation strategy with it. Thank you for sharing and your hard work @Gary C.
     

    #13
    iPhone5lol likes this.
  14. G_Bla_“MastTheking”_
    Froyo May 12, 2018


    #14
  15. N1TeSH1FT
    Froyo May 13, 2018

    N1TeSH1FT , May 13, 2018 :
    The letters are still there. If you drag the blue slider they appear. They are not tappable though but they show you your position while scrolling.
     
    Last edited: May 15, 2018

    #15
    iPhone5lol likes this.
  16. kumaryashwin
    Jelly Bean May 16, 2018

  17. G_jonny_cool_nxOr
    Jelly Bean May 16, 2018

    G_jonny_cool_nxOr , May 16, 2018 :
    When will you guys give an update of camera on oneplus 5 ? ... I havent seen an single OTA update stating improvement in camera App even though we have recieved 10-15 updates till now .. Oneplus 5 was launched on the bases of better camera but we dont get any software updates for camera at all !
     

    #17
  18. G_Sai_Raina_syku
    Jelly Bean May 16, 2018

    G_Sai_Raina_syku , May 16, 2018 :
    Good to see the thought process behind the categorized tags.
    The search bar along with the apps categorized is very useful
     

    #18
  19. MKT_IRFAN3735
    Ice Cream Sandwich May 16, 2018


    #19
  20. Aakarshit.ty
    Froyo May 20, 2018


    #20