ENGL 2105 : Workplace-Based Writing and Research

Home | AI | Calendar

Prototyping and Usability Testing

Prototyping

With AI, the cost of prototyping has dropped to zero. Prior to AI, you might sketch a design on a tablet and have a few people look at and critique it based on what they knew about how such things should look and feel. This was called heuristic analysis. Then you would take that design to someone who knew PhotoShop or InDesign or the like and ask them to make a higher fidelity model to see if the colors and layouts looked writing to people, more heuristic evaluation. This version would look like it worked but it wouldn't actually work. Then you would go to the software engineer and ask them to code a working example. You would then get a representative sample of your target population to use the working model while you recorded what they did, perhaps asking them to talk out loud as they did it so you can get a sense of how they think as they are demonstrating their behavior. Then you would go back to the software people and ask for version Beta for further testing. You would keep cycling through this process until you had something you thought you could sell.

With AI, you can go straight from an idea to a working example in seconds, though getting a specific and precise prompt might take some time. Once you can fully describe what you want, however, it will take an AI seconds to create a working model.

Using AI to make prototypes requires that you specify with precision what you want, what it should look like, and how it should work. You need to know what kind of code you want it written in or at least how to deal with what code it offers. You can always ask it for explanations to help you understand what it has done, which should help you improve on your prompt and get better results.

Here is a very simple example.

Todo List

I asked ChatGPT the following: "using javascript, css, and html write a todo script that lets a user add, mark as complete, delete, and sort items to a list and save that list locally." It produced what you see below. Try it out. Works rather well, I think, but it's not perfect. What are two ways it could be better? Now rewrite my initial prompt to include your two improvements and see if you can get ChatGPT to write your version.

NOTE: what ChatGPT gave me was content for three files, index.html, style.css, and script.js. The file called index.html looked like what you see below. I combined all three files into one I called todo.html. View the source code here to see what I mean.

If I didn't know anything about the code it gave me, I could look at what it made, revise my request, and perhaps get something more like what I had in mind.

I asked ChatGPT the following: "using javascript, css, and html write a todo script that lets a user add, mark as complete, delete, and sort items to a list and save that list locally." It produced what you see below. Try it out. Works rather well, I think, but it's not perfect. What are two ways it could be better? Now rewrite my initial prompt to include your two improvements and see if you can get ChatGPT to write your version.

NOTE: what ChatGPT gave me was content for three files, index.html, style.css, and script.js. The file called index.html looked like what you see below. I combined all three files into one I called todo.html. View the source code here to see what I mean.

If I didn't know anything about the code it gave me, I could look at what it made, revise my request, and perhaps get something more like what I had in mind.

If I thought what it offered was a good place to start, my next step would be to find some people to test it out for me. I would start that process by doing what's called a heuristic analysis.

Heuristic analysis

In rhetoric the word heuristic means invention, the process of coming up with things to say. In contemporary language, a heuristic is a shortcut, a general guideline that works effectively for the most part most of the time.

Heuristic analysis is the Usability practice of having informed users -- people who know the 10 heuristics -- use a product to see where it fails to conform to the standard pattern. It's a quick and typically cheap kind of quality control. If you design using industry standard patterns, you can presume your designs are usable, though you should verify by asking experts to assess its conformity.

Jakob Nielsen, one of the OGs (cringe?) of usability, identified 10 usability heuristics:

  1. visibility of system status -- keep users informed about behind the screen processing, loading, successfully uploaded, searching please wait
  2. use familiar, real world, language -- no jargon, no site-specific lingo
  3. users should be in control -- nothing relevant to the experience should be happening behind the screen
  4. follow industry standards -- CNTRL S means save regardless of platform or Cmd because Apple
  5. don't let users make mistakes -- multiple levels of undo, popup in place warnings about required form fields, greyed out representation of features unavailable in the current context
  6. recognition over recall -- don't make users remember or have to think
  7. flexible designs -- experts should have shortcuts and other tools that aren't visible to novices who will be distracted or confused by them
  8. minimalist design -- don't clutter the screen, don't add images as decoration
  9. no error should be fatal -- offer clear signposts and ways to start over efficiently, auto populate form data when possible
  10. provide help -- but design so no one needs it (and assume no one will read it)
Nielsen Norman Group