small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<p><a href="https://medium.com/google-design/a-fish-in-your-ear-134deed70268?source=rss----2935d33b43a8---4">Google Design &mdash; Medium</a> | Pendar Yousefi </p>
<h3>A fish in your ear</h3>
<p>Humans have been fascinated with magical creatures or devices that break language barriers for as long as languages have existed. At Google Translate, we have the opportunity to work on a product that helps us get one step closer to realizing the magic.</p>
<h4>Discovering the magic</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/400/1*5nSdEm0aH2hIpigSqkBgCw.gif"></p>
<p>Google Translate’s instant camera translation and real-time conversation modes never cease to amaze our users. But beyond their wow-inducing nature, they are extremely useful as well, helping language learners, students, tourists, and all sorts of people who need to break through language barriers.</p>
<h4>The problem</h4>
<p>Unfortunately, many of our users did not know these features existed. We first got a hunch this is true when we noticed people asking for features we already had during user research interviews. We confirmed that by running a survey which showed 38% of our users did not know we had these tools.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lUvUaxQx85QYTk2HiF11pw.png"></p>
<h4><strong>First attempts</strong></h4>
<p>Our hypothesis was that the entry points into these tools were too small and hidden. Our first instinct was to make them bigger and more noticeable. So we experimented with new UIs that did just that.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*W3qUQZFOQVwjj82STmq9QA.png"></p>
<p><strong>To our surprise, this had the opposite effect! Usage of camera and conversation actually went down. </strong>So what was going on? When we dug in, we found that many people simply ignored colorful things below the main box, often assuming they were unimportant, especially as we had historically used that space to show feature promotion cards.</p>
<h4><strong>Back to the drawing board</strong></h4>
<p>So we went back to the drawing board and asked ourselves; what are the minimum changes we can make to the existing familiar UI to make those features more clearly visible? We tweaked the icons, added text labels, and split the voice feature into its two important but separate use cases: dictation and conversation.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*gOEMblAgNbgV8l5oMf_s3Q.png"></p>
<p><strong>This worked! Usage of all features increased across the board, with the handwriting being used as much as 25% more than it was before! </strong>We even started seeing tweets from people who thought these were new features, even though they had existed for years.</p>
<h4>Improving the conversation UI</h4>
<p>We didn’t stop there. At Google Translate we’re always thinking about how we can improve the product experience for our users. We wanted to make the conversation mode UI easier and more intuitive to use.</p>
<p>Our old conversation mode UI had 3 buttons: two buttons in the left and right for each language, and a big mic icon in the middle which we sometimes referred to as the magic mic. The magic mic was supposed to know when people were talking, what language they were speaking in, when they stopped talking, and when to translate, all without any additional input from users.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*A86F--20IsBu_DS5Yk7BuA.gif"></p>
<p>It was magical when it worked. But for some languages, the magic mic wasn’t quite as accurate as it was for others. And because the UI emphasized the magic mic, many people were only using that, not even realizing there are two other manual language buttons giving them better control and accuracy. As a result, some users were encountering errors and abandoning this mode for other options like typing.</p>
<h4><strong>Ch-Ch-Changes</strong></h4>
<p>Following the lessons we learned from improving discoverability by making simple changes, we asked ourselves: what are the simplest changes we can make to the UI to make the experience more intuitive?</p>
<p>We made the manual language buttons much more visible by changing their shape and color. We still kept the magic mic of course, and even gave it a more descriptive text label. But it was no longer the big star of the UI.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qTDAZ9WBJjs10fLqXsIE8w.png"></p>
<p>At the same time, we worked with the hardware team to make sure the experience worked with the Pixel Buds as well. We made small tweaks to the UI such as showing a headset icon when the Pixel Buds were connected. One of our brilliant designers, <a href="https://twitter.com/auxdesigner">Liu Liu</a>, even came up with the ingenious idea of the &#8216;ice breaker&#8217; screen. He had noticed in user studies that the most awkward part of the interaction was the beginning of the conversation. He made a visual screen with a standard message that the user could just show to the other person to break the ice.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*CrLRAiJs-HiHM_Imn56BOg.png"></p>
<p>As a result of the UI changes as well as other technical improvements that made the conversation mode faster, we saw a noticeable increase in the usage of speech translations overall. While our quest for improving these and other features doesn’t end here, this was a great first step in making our most magical features more discoverable and easier to use.</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=134deed70268" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://medium.com/google-design/a-fish-in-your-ear-134deed70268">Designing the UI of Google Translate</a> was originally published in <a href="https://medium.com/google-design">Google Design</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Designing the UI of Google Translate

Designing the UI of Google Translate

A fish in your ear

Top Stories