Translate descriptions
👉 Visual changes to translate descriptions | T217170 on Zeplin
- Replaced bidirectional with unidirectional icon to improve awareness of translation direction. Deemphasized it (54% black), since it’s a secondary action. Tapping the icon still swaps the language. These changes are based on these findings.
- The presented card is always shown in the “From“ language.
- The card itself is one tap target. A clear call to action (“Add German translation“) indicates users the task at hand.
- The possibility to read the article has been removed in this view to not disrupt the edit flow.
- To indicate users that a random card w/o title descriptions is shown, the dice, known from the “Randomizer“ feature is reused ((s. usability testing). The existing interface is perfect in this scenario.
- A “Description published“ snackbar informs users about a successful contribution (Slide 25). The full screen “Description published“ dialog is only shown once after the first edit.
- Once a description has been added, the card indicates it (“Translated by you“) and the familiar edit pencil icon is displayed. The card still is one tap target and tapping this card again takes users back to the “Add/translate description“ with the translation they previously added
- The card feed lists all cards that users have interacted with (not only the one’s that have been edited) and should keep its “History“ per edit session.
- Show more of article text based on the users screen height. The more content from the article, the better (more context for users). The minimum article text that should be shown is 3 lines.
- To help users in deciding to add a description for a specific card, don’t show the placeholder image when there’s no “real“ article image. Instead, show more of the article text.
Translate description
👉 Visual changes to translate description | T217170 on Zeplin
- Input field is active when users arrive on this screen (keyboard is visible).
- Introducing a bottom element to easily access articles. Ideally, the bottom sheet displays more text than it does currently. This could be achieved by not showing preview images in the current implementation of the bottom sheet. Furthermore, it could be scrollable and show even more text.
- Bottom sheet allows copy pasting of text (as it does now).
- Tapping “Read article“ opens the article.
- The article view should use a regular back button. Usability tests revealed (Slide 28), that the back button is disrupting the current edit flow. The visuals above show a way to solve the back button dilemma for the entire app.
- “Open in a new tab“ is already covered with the tab feature on the article page that’s why it’s removed in the designs.
- Once users start typing, the Continue button (tick) turns blue (#36c) to lead users to the next step (review screen)
- Overall improved visual design.
- Landscape: Check out the design on Zeplin. When there’s no article image, the available space should be used to display the extract.
RTL flow
Designs that illustrate the flow in RTL:
