Interaction Design 2 — Week 9

This week our team went deeper into understanding what the users want by conducting a user test using paper prototypes and a user testing script.

We started by making a simple paper prototype consisting of a document with a keyboard and mouse cursor. This prototype was used as an interface for the people we interviewed. After making a user script, we asked the users to perform certain tasks on the paper prototype while talking out loud what they were thinking before, while and after doing anything on the prototype.

Christine Karkafi conducted the user tasks while Duping Chen documented the interview and I noted down the insights during the interview.

User Testing Script

Thank you for taking out time to be a part of this activity.

We are creating an interface for a text editing application to help improve journalists’ writing. The app’s purpose is to encourage accuracy and precision in writings that are published on the internet. The insights from this study will guide us in designing the user flow of the product.

We will be recording this session to supplement the notes we take on how you complete the assigned tasks. The video will only include your hands as you walk through the paper prototype. Let me know what questions you have throughout the process

Try to think out loud and talk about the various options you are considering. Before you click on any link, explain what other options you considered and why you picked the ones you did.

Pls introduce. Name. Tell me a bit about your computer experience. How confident do you feel using a PC? What about at home? How much do you use the internet? What kind of sites do you use regularly and find most useful?

In front of you is a computer with an article that needs to be edited. This is not a touch screen. I am gonna ask you to perform a few tasks. While you are doing it, remember that there are no right or wrong answers so don’t worry about messing up. Use the pen in front of you to mark the option you would use.

My first task for you is to select the first sentence and change it to a heading.

Now select any word and make it bold.

Take that word and make the font size bigger.

Insert an image from your computer after the second paragraph.

Cite that image.

Find a sentence and select it.

Add a source to it.

There is a spelling error in a word, fix it

The editor is suggesting five sources that can improve the accuracy of your article by adding more sources. Select all five sources to add to your article.

You have successfully edited the article. Preview how the finished article looks like to the reader.

Publish the article to the internet

Sylvia, Product Designer

Interview Insights

• Uses computers everyday
• Comfortable with a laptop and needs a touchpad
• Uses the internet pretty often
• Pinterest
• Clicks and drags to select and then go to the menu bar and find the title option and change it to heading
• Click and drag to select the word and then press Command + B or just right click and uses the popup formatting menu to make it bold
• Control + Up arrow key to make it bigger
• Right click and then choose insert from the popup and select image from dialog box or use Command + I and then choose the image
• Add citations at the end of the article
• Click and drag to select the sentence and then release it
• Add a star to highlight and then enter the source on a new text field that appear on doing so
• Red underline depicts the spell check and then click it to change it to the correct suggestion
• Select the word and then right click → Add a link to it and convert to a hyperlink
• From the menu bar → Edit → Preview option // Preference: Shortcut like F1 or Command + 1
• Press P on the keyboard and a window popups to give the option for publishing

Hersh, Transportation Designer

Interview Insights

• India, 2nd Term Grad Transportation
• Been using computers since first grade
• Confident with a desktop
• Uses computer mostly for work
• Google, Youtube, Netflix
• The script is flawed, we should have mentioned that we have to use the screen as a UI and not fix things by writing it.
• Waste

Jez, Product Designer

Interview Insights

• Uses MS Word for writing and sometimes pages
• Prefers Mac over a Windows machine
• Heavy internet user
• Google, Pinterest, CNN
• Select the sentence — find a selection menu on top left corner and choose heading but will always change the preset fonts
• Keyboard shortcut Command + B for bold
• Select the word — Formatting bar and then change the size using the drop down. Would prefer if she could directly change the font size at the current location of the word
• Keyboard shortcut — Command + C and Command + V or use a button from the header menu
• Enter and then add a hyphen — add quotation marks
• Select the sentence → Choose add a source from the menu bar → number coded source hyperlinks
• Double click the word → Use the app’s suggestion for the correction of the word
• Add other sources at the bottom using the previous method only
• File → Preview selection option and drag it down and that changes the whole view of the page
• Save the article first and then choose the correct format to save it in and then go to a site to publish it and then drag the file to the site or however the site accepts the files and then publish it

Rami Nyanat, Graphic Designer

Interview Insights

• Been using a computer since she was probably a kid
• Pretty confident with a computer
• Uses the internet quite a lot
• Google, Mailing websites, YouTube
• Click and drag to select the sentence → Right click to get the popup or use the formatting menu bar’s buttons
• Click and drag to select the word and then use keyboard shortcut for Bold
• Selects the word using the same way and then changes the numbers to change the font size from the formatting menu
• Click after the second paragraph and then right click → Insert image or File→ Place Image or Copy an image from somewhere else then paste it there
• Clicks below the image and then types the citation for it
• Selecting the sentence the same way again
• Add space after the last word and add parentheses → Add the source within the parentheses.
• Activate the spell checker → Make it look for all the spellings → See what gets highlighted and then use the dictionary to see what needs to be corrected and then make the custom changes
• Copy and paste the suggested sources and then add it to the article
• Select the print preview icon or save the document as a pdf and then open it
• Go to a website to publish the article → Upload the file there

Card Sorting

After the user interviews and taking insights we made a list of keywords which needed to be sorted into information architectures so, we conducted a user card sorting exercise to get 3 different outlooks on the IAs.

Akshay, Interaction Designer

Sylvia, Product Designer

Chris, Product Designer

Conclusion

Combining the results form these card sorts we tried to find logical common data points and made our own low-fidelity information architecture to get a basic idea of the tasks that we want the users to perform