UX Review 1 of Microsoft Teams
I am a UX designer / Interaction designer / Usability head / Advertiser / Copywriter. I am fascinated about the digital products, digging for novel features and meticulous about intuitiveness and seamless experience. I analyse the pros and cons of the product deeply adhering to usability principles, human factors, aesthetic appeal, branding consistency and psychological aspects. In a nutshell, I proclaim myself as a lawyer advocating, criticizing and striving to bring the best experience to the users. Mistakes are inevitable in some cases but periodic iterations, heuristic evaluation and usability testing saves the product from disgrace.
Think well before you design or watch users get hurt. It bleeds a lot.
I am a huge fan of Microsoft products. Their cutting edge touch deserves red carpet and a loooooooong applause. I admire their branding and user experience. Their Segoe typeface is the most captivating thing. Oops, I know it’s a small piece of the delicious cake. I have been using Microsoft teams since the debut and couple of things on the interface turned off me. There exists cognitive friction, improper component positioning, styling mismatch and few others. Let’s review the entire application one by one. Grab your coffee mate. I have pointed out the UX flaws via writing. Why not redesign and upload the screenshots? Yes, I will definitely do that soon.
Welcome screen 1 (Before Login)
Lacks branding, Improper link positioning
Application logo uses purple shades / variants (primary color code for the app is #464eb8) but the welcome screen uses purple shades / variants color only for the link : User another account in this screen whereas header and sub header use black color. Moreover, the link User another account size is relatively very less compared to the above text sizes which makes quite hard to read. On hover of the link, it does not change to hand cursor though it is clickable which is a blunder. The positioning of the link at the bottom completely disconnected from the above.
Welcome Screen 2 (After Login)
Lacks branding, Incorrect padding and components grouping.
Less padding (tight space) between the message : How would you like to appear on Teams ? and the First name followed by Surname. More padding between the Phone label and the number below. Same applies for Email. According to the UX law of proximity, the related elements have to be grouped together. The copy People can search you using this information is related to the Phone and Email technically but visually there is a confusion whether the text People can search you using this information belongs to the upper part : First name and Sur name fields or Phone and Email fields. The app logo is missing on both the welcome screens. As this is a novel application rolled out during the COVID times, displaying the logo would aid better brand recall.
Teams Interface
Looks good, feels good but confusion prevails.
Application Name and Logo
As part of brand recall, it is better to display the logo as the app is launched newly. That’s the basic rule of thumb in Branding. I could not see even the Microsoft logo here. There is ample real estate to display the logo.
Search Box
Inconsistent hint (inline) text
The hint text (Inline) search is not sufficient. It’s generic. On focus, it says Search for people and chats but this can be shown in the default state as well. The dynamic hint text change is not advisable. Keep it consistent on all the states.
Back and forward arrows
Confusion, Confusion, Confusion only
The most confusing thing in this Interface are these arrrows at the top. Looks like a browser and the navigation is not right. On activity tab (selected state), if you click on the back arrow, it directs me to Help info which is illogical. From here, if I click on the front arrow, it directs me to the Chat tab (selected state), again confusing. There is already a Help tab at the bottom.
User Settings
Poor icon visibility, inconsistent link styling and friction encounter.
The arrow displayed next to the Available status is hard to notice. In fact, it looks a tiny bug relaxing next to the word “Available”. On click of Set status message, it allows the users to set the status. The link should be represented in purple color (color used for others links in the app) but the link is shown in a different color. On hover of the link, it shows purple color without underline style. This styling is inconsistent with other links in the app. Zoom control placement is not right. By the Jakob’s law, most apps have zoom control in the main screen itself and I am sure users would expect the same way. Users would like to zoom in/out of the main interface and not the one with settings panel. About option has an arrow displayed on the right side but the additional option panel opens on the left side causing cognitive friction.
Application Settings
Redundancy
The setting icon appear in two places : One under Activity tab and another under user (personal) settings which is redundant.
Overlay panel (App tab)
Affects mental model.
Once the user clicks the Apps tab (left), it open the overlay panel allowing the user to choose and app. This design pattern is new to the world according to me because I have seen the details loading on the right side on click of the left side tab. Moreover, there is no way for the user to close this overlay (panel). They have to click elsewhere to close this overlay which is a frustrating experience.
Filters
Inconsistent hint (inline) text similar to Search box.
The hint text (Inline) varies based on the tab selection. It’s better to have a common hint text for all the tabs.
Application Settings Pop
Missing close button
Though the Setting popup has a close icon on the top right corner, it is essential to have a Save & Close button at the bottom as the user might modify one or more settings across all the tabs.
Error Message for Filters (Activity tab)
Incorrect styling
Error message have to be shown in red color as this is a universal styling in all application. Green for confirmation, Yellow or orange for warning and Red for errors.
