Strategies and Good Examples of Multiscreen UX

In last blog post, I talked about some basic principles to follow when designing for multi-screens. There is 3Cs Framework (Consistent, Continuous, Complementary) I found extremely helpful when analyzing the strategies of multiscreen design.

However, there are more specific strategies could be discussed which I believe can also fit into the 3Cs Framework. The book Multiscreen UX Design provides 17 strategies of multiscreen UX, and I tried to categorize them into the 3Cs Framework:

  • Consistent

    • Mobile First: Concentrate on the smallest device first, which forces a meaningful structure of information
    • Coherence: Individual features are optimized for device capabilities
    • Fluidity: The display is switched between the screens involved
  • Continuous

    • Device shifting: The display of information or content is shifted to a separate device by the user
    • Synchronization: Information is kept in sync and up-to-date across devices.
    • Emotionality: Make a service emotionally more attractive (make it fun and supports a device fragmented daily routine)
    • Microjoyment: Delight users based on different device capabilities
    • Smart Content: Content should be as flexible as possible, to be easily used and published across different channels and devices
  • Complementary

    • Simultaneity: Different devices or information services are used simultaneously
    • Social TV: Spatially separated viewers can quasi watch TV together or directly participate
    • Screen Sharing: Use several screens together
    • Mashability: Aggregate various content to a new information package
    • Communification: Create a community for users to create, share, rate and comment on the content
    • Gamification: Simulate a competitive environment
    • Storyfication: Use different devices to build a story for users
    • Hybrid Media: Combine other physical channels to create a new experience
    • Complementarity: Use different devices together to complete a single goal

Based on these strategies, I identified some good examples to share and further explain how to leverage these strategies when designing for multi-screens:

Instagram

Consistent + Continuous

(Mobile First, Emotionality, Communification, Device shifting)

Instagram-Multiscreen UX

Most of us may consider Instagram is a mobile app, but it does have a desktop version (web-based) for users to browse the stories and feed on the desktop. Yes, it’s majorly for browsing (and liking, commenting and sharing) instead of posting on the desktop. Only its mobile app is fully functional, which indicates its “mobile first” strategy.

As a social media, Instagram absolutely created a community for users to create, share and comment on content – adopting the “communification” strategy. Compared with other photo sharing website, such as Flicker, Pinterest or even Facebook, Instagram wins because it is the easiest to create nice-looking content (photo, with built-in filters) and interact (follow, like and comment). Besides, Instagram is also a role model of using “emotionality” strategy – it’s fast, pleasant and entertaining to use at a fragmented daily base.

 

Google Map, Drive and Docs/Sheets/Slides

Consistent + Continuous

(Coherence, Synchronization, Fluidity)

Google Map-Multiscreen UX

When it comes to “consistent” and “synchronization”, Google products are no doubt the pioneers. Most of its products provide great consistent experience across different platforms, especially Google Search and Google Map. They are very similar on desktop and mobile, just different on the layout and how much information showed on the first screen (because of screen sizes). However, there is no navigation feature on the desktop of Google Map because users are not moving when they on the desktop. On the other side, navigation is an essential feature on its mobile app. Moreover, voice control is another unique thing on the mobile app because of the hardware capabilities and use cases.

Google Drive and Slides-Multiscreen UX

In terms of G-suite products (Docs/Sheets/Slides), they are great on “synchronization”, although with varied focus on different devices. Different from Instagram, the center of G-suite products is on the desktop, where users are fully powered to create, edit, share and delete their files. While on the mobile app, the main use case is browsing instead of editing. Although the apps are trying hard to provide full functionalities, they are clearly optimized for browsing on mobile, which is a right way to ensure a good mobile experience.

 

Kindle and Medium

Consistent + Continuous

(Device shifting, Synchronization)

Kindle-Multiscreen UX

Reading is always a “continuous” activity. In the digital world, it means people use different devices to read. Or, find something to read first, and then read it.

The desktop app of Kindle is great for looking up information or scanning books, because the large screen can fit up to 3 pages on one screen. On mobile, either tablet or phone, you can only read one page at a time. Thanks to the “synchronization”, it’s very easy to jump from one device to another device while reading a same book because it saves your reading progress.

Similar to Kindle, Medium provides consistent and continuous experience on desktop and mobile, but the Medium mobile app is better optimized for the device capabilities. The “Audio” and “Bookmarks” are more prominent on the homepage on its mobile app than on the desktop. Because users are more likely to listening than reading when they’re moving, and it will be more convenient for them to start reading (from their bookmarks) than looking for something new to read. It also works better on “communification” with a stand-alone tab of “Activity” on the mobile app for users to check other users’ activities related to their post and to follow other users.

 

Netflix and Spotify

Consistent + Continuous + Complementary

(Coherence, Fluidity, Synchronization, Screen Sharing)

After gathering all the examples, I found entertainment industry is trying the hardest on multi-screens experiences. They are building all the relations among all devices.

Netflix provides consistent experiences among devices, and optimizes for each of them. On tablet and phone, the “Download” option is very prominent since they know most users don’t have a lot of high-speed data to abuse on mobile. The screen will turn to horizontal automatically when it stars playing for best watching experience. A new trick I just noticed is they have “(Instagram) story-like” previews for users to glance before clicking “play”, which is also clearly optimized for mobile. Users can also easily connect and play the show on TV from their phone or tablet, as long as they are in the same Wi-Fi networks. In the meantime, the phone or tablet can be used as a remote while watching Netflix on TV.

On Spotify, it’s also a pleasure to switch from one device to another. Users can play and control music on their desktops using phones or tablets. Discovering (music) works better on the desktop because larger screens can contain more information. Its mobile app is also equipped with voice control for users to search for music by talking. Try saying “play something special”, you may get a song that surprises and delights you.

 

Conclusion

Although there are many strategies to follow, multiscreen design is still a case-by-case challenge. If you ask me what is the ultimate strategy, I will say: think about what to focus on each device, and then design for it. On different screens, things that have to be changed is layout and navigation; things that best not to be changed is content; things that could be optimized is additional features or the priority of features (based on device capabilities). And most likely, it is the last one makes the multiscreen design standout.

 

Reference:

Nagel, W. (2017, January 24). Multiscreen UX Design – Developing for a multitude of devices. 

Principles of Designing for Multi-screens

Today, human live with screens, and most likely, with multi-screens. There are PCs, smartphone, tablets, TVs, smartwatches and more. People use them for different occasions or use them together. As a designer, I heard about terms like “mobile-first” and “responsive” a lot and have actually designed products across different platforms, while I found there is still a gap and struggle of designing for multi-screens.

Therefore, I spent some time diving into the topic to find out what makes for a good multiscreen experience and what are the things to be considered when designing for multi-screens. There are two books I found extremely helpful about this topic.

 

Leverage the advantages of the devices

Devices have their own pros and cons. They are different in display size, proximity, the location being used, use mode, viewing mode, interaction model, attention pattern, device sharing, and the built-in features and sensors. They exist because there is no one can entirely replace another.

The major devices being used include PCs, smartphones, tablets, and TVs. Smartphone is becoming the major device people rely on, instead of the traditional PCs. Therefore, in the future, there may be more and more products starting from mobile.

Tablets and TVs seems are not as popular as PCs and smartphones, however, they have their unique spaces that others can’t replace. When it comes to reading, tablets beat smartphone. When it comes to gaming, TVs beat all other screens. Another surprising fact is TVs and tablets actually make a good combination. The research mentioned by the book Designing Multi-Device Experiences shows that “70% of tablet owners used their tablets while watching TV” which constituted 30% (the largest share) of their total time with the tablet.

Time distribution of tablet usage in the US market

 

Consistent, Continuous and Complementary

Most of the apps are trying to provide the consistent experience when it comes to multiscreen design, while “Consistent” is not the only approach.

There is a 3Cs Framework could be applied to multiscreen design:

  • Consistent: provide the same basic experience
  • Continuous: the experience is passed on from one device to another
  • Complementary: devices complement one another to create a new experience

The framework could be used independently or together. “Consistent” is easy to understand, which is to provide very similar experience across different platform while optimizing for the screen size and interaction model.

Continuous” fits for the tasks which can’t be completed in a short time, so users may need to use more than one device to complete their goals. There are two kinds of flow could use “Continuous” approach:

  • Single activity flow (such as reading a book, watching a movie and writing a long document)
  • Sequenced activities flow (such as, from learning how to cook to actually cooking, from reserving restaurants to eating, from buying concert tickets to watching the show)

Complementary” approach refers to using different devices together to complete a single goal. It is currently most common in gaming and TV shows. For example, using iPhone/iPad as a controller for the game displayed on TV, or use iPhone to provide additional information of the TV shows users watch.

The book Multiscreen UX Design provides more strategies and examples of the relationships of the devices, while most of them can still be adapted to the 3Cs Framework.

 

Always consider users and the context of use

Users are always the center of UX design. For multiscreen design, both users and the context of use are very important. Unlike desktops, which we know users are mostly sitting with good internet connection, other devices turn to have more limitations or distractions.

The book Multiscreen UX Design provides great examples of how to build “user prototype” to map out the usage of different devices and the context.

Asking a 5W1H (who, what, when, where, why and how) before designing will be helpful to design for user needs:

  • Who are we designing for?
  • What are the user needs?
  • When will users be using the product?
  • Where will user be using the product?
  • Why users use the product (at the time they use)?
  • How will users use the product?

After we have a good understanding of users and the context of use, then we can define the different strategies for different devices and how they will be working together as a whole to serve users.

Also, don’t forget to educate users on how to enjoy the best experience. Some approaches we talked about before may not be as intuitive as the “Consistent” experience but will work really well once users know how to use. Therefore, remember to integrate the guidance in the user flow to help users become pros of the product.

Conclusion

It is obviously not enough to just design for desktop, which most companies already know, and it will be not enough to just design for both desktop and mobile soon – the potential of tablets, TVs, and smartwatches has not yet been reached. In the future, the display in a car may also be more connected with our other devices.

This article provides the basic principles of how to start designing for multi-screens, while different products have its unique user journey needs to be considered. It always has no harm to start with understanding users. Map out the user journey, consider the limitations of each step and then leverage the advantages of devices to provide the integrated experience for users.

LEGO Serious Play in class

Use LEGO® Serious Play® in Design Research

When it comes to “LEGO”, what would you think of? Toy? Game? Or brick?

Today I want to talk about a more “serious” side of LEGO – the LEGO® Serious Play®. It’s not a game, it’s a methodology from LEGO which uses LEGO bricks to improve creative thinking and develop problem-solving skills. In UX field, many researchers start using it to conduct UX research. In the class of Advanced Design Research, two LEGO® Serious Play® Certified Facilitators came and held an excellent workshop to demonstrate how we can potentially use the method for our future design research.

(from LEGO)

What is LEGO® Serious Play®

20 years ago, in the late 1990’s, LEGO® Serious Play® was first created by two business professors from Switzerland’s Institute for Management Development (Johan Roos and Victor Bart) and the leader of The Lego Group (Kjeld Kristiansen). The initial goals of LEGO® Serious Play® were to help business executive develop their own strategies and enhance communication in teams. The method became open source in 2009. There are some non-profit communities, which is not affiliated with LEGO®, train and certify facilitator and bring together a professional network to enhance related theories and develop more applications, such as SeriousPlayPro.com.

LEGO Serious Play Co-Design Workshop

(The intro slide of our co-design workshop)

 

During the class, the facilitators held two co-design sessions for the students to demonstrate how the LEGO® Serious Play® works. There are four steps of each session: Question, Build, Share, and Reflect. With the ground rules of “100% participation, keep the focus on the model, no wrong answers.”, we had a really good experience of creative thinking and problem-solving. Each student built two 3D models with the assigned LEGO bricks and was able to share their ideas with the entire team. I’m amazed by the creativity everyone has and the excellent “sharing” atmosphere during the exercises. I found myself know my classmates much better after the co-design workshop.

LEGO Serious Play in class

(The two models I built. Could you guess what they mean?)

Why it works

It gets people think & build

Nowadays, procrastination is a very popular topic. People tend to procrastinate because it is difficult for them to start working. Yes, it may be hard to start writing, but it is very easy to start playing with these colorful and cute bricks. While at the time you start building your model, your brain starts thinking (that’s the hardest part, right?). Besides, it is super easy to disassemble and rebuild the bricks, so there is very little “sunk cost” to try out new ideas.

It gets people talk & share

It is not uncommon that sometimes we find ourselves can’t verbalize the thoughts in our head, or there are people who are less talented in presenting which makes they tend to keep silent in a meeting. In the SlideShare of Patrizia Bertini, she talks about how people lean backward in a normal meeting, and how LEGO® Serious Play® can change participants’ attitude by changing their postures. “Everyone participants” is the ground rule. By knowing they need to share at the end of the exercises and knowing there must be something for them to share (their LEGO model!), participants are not only more willing to share but also more prepared to showcase their ideas.

(from Patrizia Bertini)

It gets people know each other

When doing research about the LEGO® Serious Play®, there is a quote I saw a lot: “You learn more about a person in an hour of play than a year of conversation.“ That’s entirely true! Because everyone needs to build with the same bricks for the same goal, and everyone needs to share what their ideas are and where the ideas come from, you get to know each other much more (than being classmates for a semester in my case). You will be surprised by how a quiet person may have the most creative idea.

When to use it in design research

As mentioned in the beginning, LEGO® Serious Play® is a great method for conducting design research. It can be held as a co-design session to invite community members to brainstorm design solutions. Or it can be just used to understand users, for example, understand the user journey for a specific scenario. It is specifically suitable for understanding the problems in the real life, where we can use the LEGO bricks to build 3D models to illustrate the ideas.

Relatively, it is probably not an ideal method for doing research for digital products in some cases, especially mobile digital products. Because most digital products are 2D screen, and relatively small, so it will be a little difficult to build with the LEGO bricks. However, it is still a good way to understand user problems and user scenario, which are the start of any kind of design.

Another potential limitation of LEGO® Serious Play® is the design will be limited to the bricks being provided. Therefore, it should mostly be used in the early stage of product development, instead of the prototype stage in the end. Nevertheless, it is always a good way to starting brainstorming or being the icebreaker for team meetings.

References:
[1] LEGO website: https://www.lego.com/en-us/seriousplay
[2] SeriousPlayPro.com
[2] Using LEGO® Serious Play® in UX Research: https://medium.com/@ksoucy/using-lego-serious-play-in-ux-research-287296d86204
[3] Lego serious play usage in UX design: https://medium.com/@ergomania_UX/lego-serious-play-usage-in-ux-design-4c27c54e1451
[4] LEGO Serious Play: bringing creative collaboration in UX: https://www.slideshare.net/patbertini/mex-lsp-light-upload

Expert Voices Interview with Sarah Doody about UX Education

Sarah Doody

Sarah Doody is an NYC based user experience designer and product strategist. She works with startups to help them launch their initial product as well helping companies already in market optimize their user experiences. She is the founder of a popular UX newsletter – The UX Notebook. Sarah also teaching about user experience, she co-developed and taught General Assembly’s first 12 week UX course. Currently, Sarah has published three featured courses on her website. I’m honored to interview Sarah about her experience and latest thoughts about UX education:

Tell me a bit about your background in UX. (How did you get into the UX field? What’s your major focus in UX right now?)

I didn’t know UX existed! I started in graphic design and then learned web design and front end coding. At some point, I realized that it must be someone’s job to make sure that what gets designed is what gets built and that’s when I learned about UX. Of course, that’s not exactly the definition of UX, but that’s what lead me to the field.

I am completely self taught and when I was starting there weren’t tons of programs. So I practiced by DOING! I sought out freelance clients, I re-designed things that I thought were problematic on various products I used, and I kept doing that over and over and over.

My focus in UX is research and experience design. I love understanding the problem and using that research to help create a strategy for what the solution should actually be. I also love figuring out the userflows and coming up with the actual experience design — wireframes and prototypes. But I’m not an interface designer!

What made you choose UX education as one of your focuses?

I’ve always been a natural teacher. One of my first jobs was a piano teacher! The focus on UX Education really came out of research.

I noticed I received a lot of email and questions about certain topics in UX including how to conduct research and how to create a portfolio. After these observations, I continued to do research including having one on one calls with people to understand their exact problems. Then, based on this research I began prototyping various workshops on these topics to test curriculum ideas and content before I turned the workshops into fully on demand UX courses.

How did the UX education evolve since you started? (What did you learn? What made you change the way you were doing if any?)

Originally when I was testing these course ideas, I conducted the classes as small workshops which I taught live. However, a challenge with teaching live is that not everyone can make a specific time slot. So recording everything and making the courses on demand was something I did to make the programs more accessible for students.

I also learned that people are completely tired of programs that have a lot of theory. People want to take ACTION! So creating worksheets, templates, checklists, etc are very crucial to people actually implementing what they’re learning.

How do you think about the current education environment of UX? What are the gaps you see between UX education and the UX industry in the real world?

I think the landscape of UX education programs in general is still very confusing for people because of the vast range of prices, timelines, promises, and guarantees. Some programs even guarantee people will get jobs!

The missing link in the UX education environment right now is the element of experience. True real world experience. Of course some UX programs integrate projects into the curriculum, sometimes even with paying clients that the students do a project for. However these programs are not the norm.

Once someone gets educated, they need experience. And it’s a chicken and egg situation. Companies don’t want to hire people who haven’t worked in the real world. Especially in a field where certification isn’t the norm.

There aren’t enough UX internships or apprenticeships to give people a chance to practice UX in the real world. I don’t know the solution to this problem, but after spending 50 hours over the last few months having research interviews with UX designers, I know this is a real problem.

What advice would you give to someone who is receiving education and trying to get into the UX field?

Look for internships, although they are hard to find. It’s a huge opportunity to work on projects in the real world. But in the meantime, take it upon yourself to be a “problem spotter” — I always say that designers can’t just be problem solvers, they must also be experts at spotting problems.

If you get into the habit spotting problems, then you’ll always have a great list of project ideas you could pursue to get more experience. But keep in mind, if you do tackle these projects, then do some research, talk to users, look at competitors, see what you can learn about the company from articles, blogs, etc so that you can arm yourself with (hopefully) real world intel that can help shape your decisions. A challenge with these projects is that you’re doing it in a silo, you’re not encountering the challenges you’d face if you had the full story, the data, the limitations, etc. So try to find some of that through research.

(Sarah writes about user experience, design, and technology on her website, www.sarahdoody.com and can be reached on Twitter @sarahdoody, Medium @Sarah Doody.)

How UX Evolves for Virtual Reality

UX Design of VR

Hey designers, like it or not, virtual reality (VR) is really coming. We just spent or are still spending great efforts to adapt to the trend of mobile, now part of the focus should probably be shifted to look at the UX of VR. This article is going to talk about how UX looks like in virtual reality and what should be paid attention when designing for VR.

What build up the VR experience

There are many categorizations about the types of VR. For example, categorizing it into three main types of VR experience: 1-Hyper-immersive and emotion-based, 2-POV documentary, 3-Gamified experiences/games. It is good to know these currently popular types of VR, but since it is content-focused and the content is always expanding, I found it may not be the best way to deconstruct VR.

A more easy-to-understand way is looking the extent of two components: Environment and Interface. Is it having a complex environment without interface? Or is it having complex interfaces while no environment? Games should be placed in the former quadrant, while the user dashboard, video watching interface and (potentially) virtual shopping would go to the other quadrants.

VR: Environment + Interface

Understanding the two components is very important since all the interactions and design considerations will be based on that.

What makes a good UX of VR

Before diving into how to create a good design, let’s look into the criterion of good UX for VR first:

  • Believable:

    Believable is the key to virtual reality. Unlike other digital products, in virtual reality, users are enveloped entirely in a virtual environment because they want to experience something different or something they couldn’t do otherwise. So how to leverage the design (image, sound, etc.) to let them feel it is real is very important.

  • Interactive:

    When people in a closed space, they need to interact with the environment to be engaged and avoid some negative emotions, such as fear. In virtual reality, the challenge of interaction design is to make it very intuitive because people expect it to be real having as little interferences as possible. It is also not as easy-to-control as traditional digital products in virtual reality because there is a “distance” between controller and interface (image using a television remote to browse an interface on the TV, and compare it with the experience of using a mouse to browse a website), so making everything looks natural and accord with how people act in the real world would be the goal.

  • Explorable:

    Different from how we play with computer or phone – sitting tight, the motion and movement in virtual reality matters (a lot). Therefore, it is different from a 3D movie where audience only watch and feel, instead, they need to be part of the stories in VR. As designer, you can allow them to walk, or even simulate flying, where is the stage for you to show your creativity.

  • Immersive:

    By achieving the previous three criterions, the ultimate goal is to make users feel immersive – enjoying the whole experience. VR could be a tool for people to escape from their daily lives to try something totally new and even surprising, which requires isolating them with the real environment they are in and providing 360 degrees experience.

VR-interface

Major considerations when designing for VR

After understanding the VR experience and what makes a good design, now it’s time to learn how to create an awesome design for VR and what are the major considerations.

  • Interactive & Reactive Design:

    The experience of virtual reality is highly interactive and reactive which respond to users’ motion. To build the great interactive experience, using head tracking, motion tracking, eye tracking (potentially) and leveraging the controller in user’s hand are the keys.

  • Comfort and Ease:

    Making user comfortable is unprecedentedly important for UX designer of VR. Since users are in a virtual environment, it is very likely the motion sickness or virtual reality sickness happens. It could because the image is not designed right, or users lose the control of their movement, which should be taken care seriously and better avoided at the first place.

  • Text and Image Scale:

    In virtual reality, detail matters. It is vital to keep visuals clear and legible to prevent eye strain. Unlike traditional screens, the visuals are constantly changing while the user is moving. Therefore, different style guides need to be prepared for different circumstances, such as the size of font and the shading of objects.

  • Sound:

    Music and sound effects are not only just for creating atmosphere or decoration in VR, but also, more importantly, being used as showing users’ relations with other objects and the environment, which could be hints for users to interact and move.

VR-Motion Tracking

We are at a turning point for the popularization of VR and user experience. More factors and context need to be considered in VR, but the good thing is there are many untapped territories here, as well as the opportunities for UX designer to grow and become expert of certain field. I’m looking forward to seeing more and more UX designer start diving into this category since the UX is actually deciding the future of VR.

 

References:

[1] Anderson, S. (2017, April 14). You’re the center of the universe: A UX guide to designing virtual reality experiences. [online] Telepathy. Available at: https://www.dtelepathy.com/blog/philosophy/ux-guide-designing-virtual-reality-experiences [Accessed 1 Nov. 2017].

[2] Hopkins, C. (2015, May 29). Designing For Virtual Reality. [online] Ustwo.com. Available at: https://ustwo.com/blog/designing-for-virtual-reality-google-cardboard/ [Accessed 1 Nov. 2017].

[3] Hudelson, B. (2017, May 16). Designing for VR | A Beginners Guide – Prototypr. [online] Prototypr. Available at: https://blog.prototypr.io/designing-for-vr-a-beginners-guide-d2fe37902146 [Accessed 1 Nov. 2017].

[4] UX Planet. (2017, Aug 7). How VR Is Changing UX: From Prototyping To Device Design. [online] Available at: https://uxplanet.org/how-vr-is-changing-ux-from-prototyping-to-device-design-a75e6b45e5f8 [Accessed 1 Nov. 2017].

[5] Charara, S. (2017, May 22). Explained: How does VR actually work?. [online] Wareable. Available at: https://www.wareable.com/vr/how-does-vr-work-explained [Accessed 1 Nov. 2017].

[6] Ravasz, J. (2016, May 8). Design Practices in Virtual Reality – uxdesign.cc. [online] uxdesign.cc. Available at: https://uxdesign.cc/design-practices-in-virtual-reality-f900f5935826 [Accessed 1 Nov. 2017].

[7] Cortes, L. (2016, March 16). The UX of VR. [online] Creative Bloq. Available at: http://www.creativebloq.com/ux/the-user-experience-of-virtual-reality-31619635 [Accessed 1 Nov. 2017].

[8] Allen, D. (2015). The Fundamentals of User Experience in Virtual Reality. [online] Block Interval. Available at: http://www.blockinterval.com/project-updates/2015/10/15/user-experience-in-virtual-reality [Accessed 1 Nov. 2017].

[9] Applebee, S. and Deruette, A. (2017, February 6). Getting Started With VR Interface Design – Smashing Magazine. [online] Smashingmagazine.com. Available at: https://www.smashingmagazine.com/2017/02/getting-started-with-vr-interface-design/ [Accessed 1 Nov. 2017].

Design Critique: Medium (IOS App)

 

Medium (ios app)

Medium is an online publishing platform launched in August 2012, having a mass of amateur and professional people and publications writing blog posts on it. The clean design quickly differentiates it from other publishing platforms and aggregates many professionals. This article is going to assess the design of medium IOS app using Don Norman’s concepts and principles in his book: The Design of Everyday Things.

Great Signifiers and Mappings

Signifiers and mappings

The Medium app uses clear labels and icons to inform users the functions or content on the platform, which is, as the theory of Don Norman, signifiers. For navigation bar, it has icons with a thicker thickness to show the major features of the platform. For articles, it has icons with a thinner thickness for functions of “Like”, “Share” and “Save”. No matter in the list or single article page, it displays great detail of the articles: the author, publish date, estimated reading time and topic label, fully informing readers the related information.

The title, content, and actions also match very well. “Home” and “Series” are the two type of stories available on the platform, users can swipe the screen to switch between the two.

Delicate Feedbacks Design

Medium-Feedbacks Design

For the “Save” features, the design of feedbacks is very delicate. It not only instantly changes the status of the icon, but also flash the text explanation of user’s actions, avoiding potential confusion.

Innovative Conceptual Model

Medium - Conceptual Model

(from Medium)

Besides regular blog post, Medium has a new type of story just for mobile users – Series. Series display stories by card, and the card can be added to over time and unfold. The usual conceptual model for reading blog post is scrolling vertically. But for “Series”, the conceptual model is swiping horizontally, and the author will decide how many words readers should read on one screen.

A problem is there is no page number (signifier) on the screen for “Series” story. There is a progress bar on the top of the screen, but users can’t tell how many pages left. I will suggest adding a page number at the bottom the screen, so users are better informed and able to estimate the time for reading.

Medium - Writing Series

The design for “writing series” feature also successfully implies the conceptual model of how to navigate the interface and start writing – swipe and tap, which is cool and innovative.

Space for “Knowledge in the World”

Don Norman introduces the concepts of “knowledge in the head” versus “knowledge in the world”. “Knowledge in the head” is efficient to use while requiring considerable amounts of learning. Inversely, “knowledge in the world” requires no learning and helps us store information we otherwise would forget, but it is difficult to use. Both of them are essential for human’s daily functioning, but they have a negative correlation. It means if you choose the advantage of one, then you will lose the advantage of the other.

As information explodes, relying on “knowledge in the world” is becoming necessary. Good design as Medium can help us minimize its disadvantage. In the personalized reading list, Medium offers four buckets for users to store useful articles or information: Saved, Archived, Recommended, Highlighted. It makes these “knowledge in the world” easier to use.

Medium-“knowledge in the world”

To make it even better, it will be helpful to add features allowing users tag or categorize the articles they save, or the system automatically helps users complete the categorization. It would improve the accessibility of this knowledge, and enable users to find the information they want quickly.

To sum up, the design of Medium platform satisfies the design principles by Don Norman: clear signifiers, delicate feedbacks, and well-display conceptual model. With the considerations of human and environment factors, its IOS app has mobile-only features which is a great example of human center design.