Wireframing and Task Analysis
[Challenge 2]
For starters
As the end of week 0 at Ironhack Sao Paolo approaches, having worked heavily on all of the pre-work activities, I believe it’s safe to say this was my favourite activity of the week to work on, and the reason for that is that I started it off thinking how dumb my choice of task was. “Who cares, everyone uses Twitter, why do DMs even have read receipts, this will be such a redundant article”.
Well, first off — no, not everyone uses Twitter, who would have known. Secondly, privacy and safety turns out is one of the most important aspects of our live’s, that’s off the table — whether physical or online, well, it matters. A lot. And the way we seize hold of our privacy may not be as easy to come across as my task analysis proved me.
Choose your f…low. User flow, that is.
I’ll be honest, dear Medium reader. I rummaged the Twitter app in order to find a 6 screen flow I could write about. There was no sophisticate cause-effect reasoning behind that decision. I plead guilty. And thus I ended up bumping into the screen for toggling on/off the read receipts for DMs.
Seemed pretty ordinary, the type of thing that only the most savvy of twitterers would care to go after (the rest of them would be pleased that the receipts appeared next to the sent messages this one random day in late October), but I realised during the process of my task analysis (among the light banter and thoughtful one-liners my peers had to spare) a very interesting fact concerning my task flow: the fact that, as eloquently put by Laura Wagner, “the informed consumer is a better consumer”. Read receipts aren’t inherently good, nor are they evil, but they sure can be, for instance, the foundation of trust between client-companies. They are, at the end of the day, a big deal. And as such, knowing how to toggle read receipts on/off becomes an evidently important user flow for apps with an in-built messaging system.
But first, let us (briefly) inventory Twitter
It’s very safe to say: Twitter hasn’t got much going on — at least not UI-wise, bear with me: there are lot’s of very simple buttons and toggles; tweets are basically a not so limited text field (sure, you can only publish 280, but I managed to fit 58,240 characters in it before I crashed my web browser!); there’s the search field, which facilitates the hashtag system spearheaded by the platform way back in the 00s (I wonder if we can call those chips? Any tips?); we have also a reasonable amount of icons, a notification tab too; there’s pop-up tool tips for the novices, and message boxes for confirming some of the actions (such as changing your password, or the visibility of your profile).
In conclusion, it’s a pretty simple user interface for such a contemporaneously relevant social media (well, it doesn’t trump WhatsApp, at least not in Brazil). Not that many surprises and, what’s best, wire-framing it was indeed a 🍰.
I’d love to Talk Task Analysis!
So I had already picked which user flow I would wire-frame, had the lo-fi sketch ready, then I would move on to task analysis and lastly do the prototyping. My mind was a hundred percent gearing up towards doing my first prototype on Adobe XD.
And then I asked a couple fellows who either don’t use regularly or had never used Twitter before to complete the task of turning on read receipts for DMs. Here’s what I came across:
- What I thought I would write about my task analysis:
In order to toggle on/off read receipts for DMs on Twitter, open the side panel, tap on Settings, then privacy, then find your way around DMs settings.
- What I actually wrote about my task analysis:
The biggest take-away I got out of asking people to perform this user flow for me was that apps can have such specific vocabulary (or weirdly enough, too trademark-y) that it makes things confusing for infrequent users. Also, having more than one acceptable pathway for a task to get completed can be useful, seeing as different people intuitively go to different parts of the app after what they need. By the same token, however, having an extensive settings menu can be cumbersome and overwhelming, which troubles the user who expected to quickly accomplish any given task. Also, something that is missing from Twitter’s side menu is something as simple as… pertinently allocates icons inside the menus, to guide the less accustomed eyes’ intuitive tapping around. One of my interviewed users expressed dismay at the lack of iconography in the side menu: “Do they seriously expect me to read every single label individually? Who does that in 2020?” I, too, fellow Ironhacker, wonder.
Does this link really work?
*Sips noisily*
I’m sincerely sorry in advance for this section of this post for those using a web browser. Slightly less so for people using their mobiles, but sorry still.
You know, the enlightening road of learning has quite a few bumps in it. For instance, if you ask me how come my GIF turned out this size, I will not have an answer to provide you with as of the moment of this writing. It’s part of life. It’s part of the journey. “Trust the process” is a very popular adage among Ironhack students, particularly during week 0.
Prototyping was a piece of cake at a first glance — despite my initial frustration with Adobe XD for designing purposes, I find that its prototyping function is really outstanding and impressive. As a matter of fact, at this early stage in my learning the ropes of it, the options for easing in and out between screens seem excitingly endless. I did miss, however, an exporting option for recording the screen? I ended up using a built-in Windows software to do the recording, which wasn’t exactly enticing.
Regardless, this was a very rich experience, and I am extremely glad to have it all documented here. The first time is always the hardest, and not always as exciting as this one was.
Leave your comments below, would love to read and respond to all of them!
