Website Archives - Page 10 of 11

Registering a Product Shouldn’t be this Hard

Rachele DiTullio19 April 2016Desktop, Websiteforms

When I bought a new dishwasher recently, I went online to register it with Frigidaire in case I needed to use the warranty. My immediate reaction was, is this something I have to print out and mail in?

screenshot of a web form on the Frigidaire website — *Screenshot: Frigidaire product registration form*

This form suffers from a lot of problems including

Unclear form fields because they aren’t boxes, just underlines; where do I click?
Unnecessary fields (email confirmation, first and last name instead of full name)
Small text with poor contrast
Required fields that aren’t marked (address, city, state, zip)

My focus for this post, though, is the next part of the form where the user is asked to enter product information.

screenshot of form requiring the user to click a box to show the form's fields — *Screenshot: Add a product*

The whole reason I’m filling out this form is to add product information, yet those fields are obfuscated by an unnecessary ‘add product information’ link. When clicked, fields for model number, serial number, date of purchase and location of purchase display, and the wonky ‘add production information’ link remains.

screenshot of a web form with four fields model number, serial number, date and location with a disabled submit button — *Screenshot: Add product fields*

If you click the ‘add’ button without filling out these fields, you get error messages for three of the fields as it turns out model number, serial number and purchase date are required.

screenshot of error messages when leaving the add a product fields blank — *Screenshot: Add product form validation*

Design Recommendations

Don’t require the user to click the ‘add production information’ link to see the form fields and remove the unnecessary help text above the form: “Click below to add your product information”
Clearly indicate required fields
Make form fields look like form fields
Provide form labels and keep formattitng instructions visible instead of using placeholder text
Make it easier for users to understand what model number and serial number are and where to find them

I gave the form a streamlined, top-to-bottom flow with large text and obvious form fields. To the right is an example of a product tag that shows what the user is looking for to locate model and serial numbers; I also listed the links to the help pages that show the locations of these tags for each product type.

screenshot of the form with three fields model number, serial number, purchase date and links to find this information — *Redesigned add product form*

The form checks the field data as it is entered and alerts the user of errors inline. Once a field’s data validates, a check mark displays next to it. After the user enters his model number, an image of that product and the product’s name display below the field for visual verification.

screenshot of the redesigned add product form will the fields field out — *Redesigned form filled out*

Once all required fields are verified, the “Done” button becomes active. After clicking “Done”, the user can choose to add additional products—something the existing form handles well.

Kudos to Half Price Books for Guest Account Creation after Checkout

Rachele DiTullio5 April 201617 July 2021Desktop, Websiteaccounts, good

I’ve studied a lot of in-depth research on e-commerce and one of the more disruptive user experiences is requiring customers to create accounts before allowing them to give you money.

Of the top 100 sites evaluated by the Baymard Institute in a 2012 study, 76% allowed guest checkout.

graph: 35% of companies grossing over $1 billion and 21% of the rest require an account to make an online purchase — *Graphs: 76% don’t require an account to purchase, courtesy Baymard Institute*

But only one of these companies (ranked #1 of 100) allowed a guest user to create an account after checkout. The checkout process should be linear, so asking a customer to create an account at the end of the purchasing process makes sense and is a better user experience.

It’s difficult to find examples of sites doing this since it requires making a purchase, but I did come across one finally: Half Price Books, a Texas-based used books chain.

Screenshot: HPB.com page allowing a customer to create an account after checking out

Good job! Now just remove the password confirmation field 🙂

Images Embedded in Tweets

Rachele DiTullio15 March 2016Website

Being able to add images easily to tweets is great (even if they aren’t accessible). I find myself frustrated, though, with the inconsistent nature of how those images are displayed.

In the feed, you get a snapshot of the image based on the size of the original image. Here is an example where the original image is very small.

screenshot of a tweet with a small embedded image of the state of Texas with county names too small to read — *Tweet with a small embedded image*

What I always expect to happen when I click a tweet—particularly one where the text is completely illegible—is to see a larger version of that image. But if the original image is small like this one (480×360), then clicking on the tweet is useless.

tweet with embedded image expanded — *Tweet expanded*

Conversely, if the original image is large (in this example 600×1067), the feed shows only part of the image cropped at 506×506.

screen shot of a tweet with a large embedded image of a road with damaged guardrail — *Tweet with embedded image of 600×1067*

Clicking to view the tweet then shows a shrunken version of the original image at 315×558 without a way to really see the full image, which is what I want to see.

screen shot of a tweet's embedded image that is too large to fit the modal container — *Tweet with full embedded image shrunk to fit the container*

Design Recommendations

I’d like to see an icon that indicates there is a full size version available. That way, after I click on the tweet, I can click on the image to see the original.

screen shot of an icon overlay to view the original image in a tweet — *Tweet expand image icon*

In the first example of a small image in a tweet, the problem is partially a content issue. People can and should be able to post whatever images they want, even if they have small text no one can read. The absence of the expand icon could indicate there is no larger size to view.

On a mobile screen where even the small example here is likely smaller than what shows up in one’s feed, this problem isn’t as noticeable. But for those of us still using the desktop version, it can be quite annoying.