In his article Best practices for form design, designer Salim Ansari discusses twenty do's and don'ts for making web forms easier for people to sucessfully fill out. These tips boil down to striking the balance between making relevant information available to people while also not overwhelming them — utilising visual cues to communicate as well as verbal. The key takeaway is to always be on the lookout for whether you're making form design choices just for aesthetics or if there is a communicative purpose behind it. In the future I could see myself using this article as a checklist for improving my forms. I wish the IRS would take some of Ansari's advice.
When is comes to famous forms, The Password Game by Neal Agarwal is one of the most iconic. Counter to Ansari's advice (but ultimately highlighting the importance of best practices), the game hinges on keeping the form's requirements hidden from the player. As the player fulfills the requirements, more and more increasingly absurd rules are revealed, creating an experience which echos Ansari's advice to put the easy questions first so people will become invested and be more likely to persevere with difficult tasks.
Overthinking Overlays
Overlays can be very powerful in UX design; they can reduce the number of pages and clicks the user has to perform to complete a task. However, they've gotten a bad rep over the years because they're often used for the wrong reasons and implemented carelessly.
In order to avoid frustrating overlays that remind the user of pop-up ads, Kathryn Whitenton from the Nielsen Norman Group reccomends evaluating a potential overlay with six questions:
Who is the intended audience? If you expect users on mobile, Whitenton reccomends to stay away from overlays entirely because they can obsure content and make pages unsusable if the overlay was created only with the desktop view in mind.
What is the purpose? Overlays prompt the user to view content, complete a form, or make a decision. In all of these cases, the information and resulting action need to be simple and communicated concisely to the user. If the information or action is lengthy or complex, a separate page may be more user-friendly.
When will the overlay appear? Whitenton reccomends not interrupting the user's flow with an overlay unless the information and action are urgent to the user's task, although putting an overlay at the beginning or end of a task flow can be alright since it is less of an interruption.
Where will the overlay appear? Overlays should be centered horizontally and the top should be in the top half of the page to ensure visibility and limit scrolling across screen types.
Why does this need to be an overlay? If you can't provide a satisfying user-centric answer, it's probably best to have it as a section within the current page or a separate page.
After reading 10 Intriguing Photographs to Teach Close Reading and Visual Thinking Skills by Michael Gonchar, I think visual thinking and analysis is a promising method for teaching critical media consumption that is directly applicable to the highly visual media landscape that modern children (and adults) experience on a daily basis in the 21st century. I remember being in middle and early high school, being taught media literacy and analysis through my English classes, and I had a really hard time getting it. What eventually made it click was taking high school art classes, and realising through the metaphor of visual art how other forms of media are just as intentional, constructed, and persuasive.
Mat Voyce's portfolio page is a highly visual introduction to his graphic and motion design work. One of the most interesting parts of the page is the Featured Work section, where the scroll interaction changes from a typical vertical scroll, to a 3D scroll effect on the z-axis. The parts of the page go from the background, to the midground, to the foreground, then past the viewer's field of view.
Visual thinking analysis for Every Picture
Jasmine Gonzalez Pacheco was my partner for the image exchange. These are the images she shared with me:
These images show two views of an eyeshadow palette — one view is of the closed palette, showing off the outer package design, while the other is a view of the opened package, revealing a built-in mirror as well as the eyeshadows themselves. The design of the product is ornate and highly feminine, and features a variety of pinks. The product is situated atop a grey surface, probably a table, and is framed in a bird's-eye perspective.
I am interested to see the directions and depths that Jasmine decides to go with her project, and I think there's a lot of potential for exploring the emotional experiences that go into one's makeup routine. In order to capture those emotions better, I would suggest taking closer shots of the makeup product, focusing on the fine details that bring the most joy, and then making sure to reflect on that joy in the text of the project.
For my project, I'm planning on using this image, among others:
This image was taken by my mother, who is an amateur photographer, for my high school graduation in the spring of 2020. In the image, I have a shoulder-length haircut, which was a slightly grown out version of the bob cut I had gotten a few months previously.
This haircut was a dramatic change from the long one-length hair I had for most of high school, and had been a conversation between me and my mother for all that time. Whenever I would bring up a desire to cut my hair, she would discourage me from doing it. She thought my long hair was beautiful and feminine, I thought it looked like it was smothering me. I was very happy to get this haircut, and I received nothing but compliments about it, and my mother admitted that it looked good.
This haircut was a lesson in independence and trusting my own judgement. Many of my haircuts visually represent the social and internal situations I was in at the time and lessons I was learning growing up.
To bring more attention to my topic from the images I have, I could use photo editing techniques to highlight my hair, such as having the rest of the image in grayscale while my hair is in colour, or having the rest of the image be invisible at first, with only the hair visible, and while the user interacts with the page the rest of the image comes into view.
Entrancement — They are both intuitive and satisfying; easy to play but challenging to play well. This creates a sense of mastery over time and a point of comparison with others.
The "aha" moment — Situational unpredictability followed by player-generated certainty, creating a sense of personal accomplishment and pleasure.
Popular games are:
Collective, yet personal — There's balance between shared aspects of the experience and unique aspects. All players are presented with identical situations, but each goes on an individual journey to address it, which creates a sense of agency and accomplishment (even if the ultimate solution is the same for everyone).
Shareable — Players can easily communicate about the experience, compare performances & techniques, and create community.
