Skip to main content

UX Shop

BLOG

graphic since 2004 with magic wand indicating how long the ux shop have been in business
a woman shopper in high heels is adding items to the car on an ecommerce site

Tanja Medic June 23, 2019

E-COMMERCE SITES: What do users expect?

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Design for patterns already learned by users. Period.

Jakob's Law

Expectations of users changed

Over the years, users have acquired a new type of behavior when it comes to online shopping and have developed higher expectations of their experience on e-commerce sites, Nielsen Norman concluded with their research. They expect: convenience, speed, assurance, accuracy, options and superb experience.



Convenience

Users expect to shop whenever and wherever they are, regardless of the device or channel they use.

They expect the physical and online worlds to blend seamlessly.

Users rely on in-store pickup when a product is needed quickly or when they want to avoid shipping charges. Shoppers also expect the ability to go to a physical store to view, pick up, or return products discovered online.

In addition, users expect accurate and reliable inventory information for nearby stores.

And they like capabilities to schedule recurring orders, so they don't have to worry about running out of a product they often use.

Speed

Users come back to the sites that satisfy their instant gratification and immediate expectations; they expect and appreciate one-click ordering, seamless and effortless workflow, and fast shipping.

Assurance

Users want to feel safe on e-commerce sites. They expect clear communication about data protection and security measures in place.

Accuracy

Users want to feel in control and they don't like surprises, and missing and inaccurate information.

They trust retailers that provide accurate, and high-quality information. That includes precision in geolocation information, inventory data, order-status messages, pickup time frames, pricing, arrival dates, and user reviews.

Options

Users now expect e-commerce sites to give them options for almost anything they can do. That includes free trial period and full refund, a variety of payment methods, and customer service help available on multiple channels.

Experience

Today's users expect added elements of surprise and delight, such as impressive and unique packaging, inspirational content, and digital experiences that are extensions of physical ones.

Conclusion

A lot of expectations for sure, but none of these expectations are impossible to fulfill. If you want to grow your business, you can't do it without loyal customers. And you can't acquire loyal customers, if you don't have a trusting relationship with them. As the saying goes: A man is only as good as its word.


a blind man is walking accross the sidewalk with a cane

Tanja Medic May 12, 2019

USER TESTING REPORT: Accessibility practices and tools III

Keyboard users

Screen readers convert digital text into speech, empowering users to hear content and navigate with the keyboard. They help people who are blind or have motor, cognitive and learning disabilities. Screen readers present content linearly to users, one item at a time.




Here are guidelines for preparing digital content for screen readers:


  1. Specify document language with a lang attribute.
    Example:<html lang="en">.

    If you have foreign phrases, include the proper language tags:
    <span lang="fr">"C'est la vie,"</span>.

  2. Links should make sense when read out of context because users can use the Tab key to jump from link to link.

  3. Organize content with headings because users may jump from headings to headings to get the overall impression of the content.

  4. Use appropriate HTML elements, such as:<nav>,<header>,<main>,etc.

  5. When possible, place the distinguishing information of a paragraph in the first sentence.

  6. Allow users to skip over repetitive navigational links.

  7. Make sure to include a proper punctuation with text. Screen readers pause for periods, semi-colons, commas, question marks, exclamation points, and paragraph endings.

  8. Include descriptive alternative text with images and graphics because screen readers skip images without alt tags.

  9. Make sure that the entire content is available, not hidden in pop-up modals, accordions and similar components.

Since I had a lot of modals, it was easier for me disable stylesheets, and get rid of a lot of HTML tags and most of images:

MY PORTFOLIO - NO STYLESHEET

I recommend then that you test your Web site like I intend to do. First with a screen reader yourself, and then observe other users with screen readers.


a woman designer is looking at the black and white interface, surrounded by black and white products

Tanja Medic May 5, 2019

USER TESTING REPORT: Accessibility practices and tools II

Colorblindness again

I used Colorblinding to check how people with various color blind conditions experience my portfolio. I didn't see overlapping colors, but I realized that their experience is still diminished.

To make the entire experience for people with various colorblind conditions better, I created a black and white version of the Web site.




Take a look:

MY PORTFOLIO - BLACK/WHITE

This would be considered an inclusive design because people with normal vision and people with low vision have the same kind of experience. But how many black and white interfaces and other products, do we encounter in our daily lives?

Something to think about, ha?

To be continued...


a woman designer is looking at enlarged interface

Tanja Medic April 20, 2019

USER TESTING REPORT: Accessibility practices and tools

Color contrast

I used WebAIM to check for color contrast on my portfolio.

Fixing the colors didn’t take away any flair from my Web site. It just made it better. Colors are popping up for people with normal vision, and slight changes made the content easier to read for everyone.

More importantly, the content is accessible for people with low contrast sensitivity. It also works for people with color blindness, who cannot distinguish between certain colors.




I still need to check if the content works under sunlight and glare.

Color blindness

To check the Web site for various color blind conditions, I used the Google Chrome plugin Colorblinding.

It simulates how people with various colorblind conditions see your interfaces. The goal here is to help them distinguish between overlapping colors and to make sure that the content is available to them.

Visual impairment, blindness and learning disability

To check the Web site for people who use screen readers to access all electronic content, I installed JAWS. It didn’t really work well with my laptop.

When I wanted to download NVDA, I was taken to the Paypal page

Ha, talk about usability and accessibility.

To be continued…


a woman is holding an oversized pen pointing to the interface

Tanja Medic April 19, 2019

USER TESTING REPORT: Secondary findings

Be careful about the language

Something peculiar happened during my user testing.




One of the testers didn’t like the language used in this particular paragraph:

I interviewed the team members, Livestrong members and their family. I ran into a huge block with a nursing survey (hospital bureaucracy), and with my donors' survey. I would accomplish much more if I just randomly interviewed potential donors. In this case, it turned out that surveys are useless.

I know that it was only one user, but he may represent a group of them. And this user wasn't just slightly upset. He kept coming back to that paragraph often.

So, I changed it:

I interviewed the team members, Livestrong members and their family. I completed a short heuristic analysis of existing Web sites after reviewing guidelines for landing and donation pages. I also observed a lot. Take a look at what I found out.

I can’t understand for the love of me what was wrong about the first paragraph, but heeey.

To be continued…


a user testing

Tanja Medic April 17, 2019

USER TESTING REPORT: Key findings

My portfolio was only one pager in the beginning. I added a lot of stuff lately, so I had to do user testing again. I’m still not done with the testing, but here are some key findings.




Testing my assumptions

The most surprising finding for me was how users interacted with the layout on large devices. I didn’t want to change some of my interfaces, until I had a chance to test my assumptions. I hid some info on secondary pages. I left either one, two, or more side sections on the right.

Summary info is important

Just as I assumed, visitors wanted at least summary info about the entire Web site on the home page. So while the education info seems redundant to most designers, it’s still relevant to people who hire for positions and don’t want to hunt about your qualifications. When they couldn’t find the info, they would fall back to the navigation menu and find their way to the secondary pages. None of them used the search bar.

The F-pattern may be a myth

However, I expected that the visitors will follow the F-pattern. I was surprised to learn that some either ignored the side sections, while some read from left to right, reading the left section and then continuing with the right section. So either the F-pattern is a myth, or users changed their reading and scanning pattern due to frequent use of mobile devices.

Stop experimenting

That convinced me to stop playing with my interfaces, and change the layout - put information in the middle and let users focus on one section after another, just like they do on mobile devices.

To be continued…


stripe and donations page

Tanja Medic April 14, 2019

How to create usable donation pages

According to the UX experts, non-profits act as if they don't care about online donations. Poor design decisions cause usability problems and users' turn-off. Many spend a considerable amount of time looking for information, and leave non-profit Web sites unable to finish the donation process.




User research finds significant deficiencies in non-profit organizations' website content, which often fails to provide the info people need to make donation decisions.

Nielsen Norman Group



The Nielsen Norman group has already conducted extensive studies that may help many designers avoid users' turn-off. Here is what they recommend as usability guidelines:


  1. Clearly explain what the organization does and how their work is done, in a succinct and easy to understand manner.

  2. Disclose how donations are used. Don't hide this information from users.

  3. Display third party endorsements to prove credibility - watchdog ratings, high profile endorsements, testimonials, name recognition, and number of years in operation. Encourage your supporters to recommend the organization to family and friends - social proof principle.

  4. Provide a noticeable and clear link to donate. When asking for monetary donations, the phrases Donate and Donate Now are immediately understood by the users.

  5. Streamline the donation process. Make it fast. Mimic the e-commerce checkout process. Don't require extra steps - more typing or decision making. The less time users spend with the donation process, the better likelihood they will finish the process.

That's it. You're good to go.


returning money into a wallet

Tanja Medic April 14, 2019

What kills donations

...Fixing a process with even minor usability problems might increase donations by 10%. For a non-profit with a $10M budget and an average share of online donations, such minor tweaks could mean an extra $100,000 per year.

Nielsen Norman Group




According to the study by Nielsen Norman, users are turned off by bad page design, unclear and missing content, and a lack of credibility:


  1. The study found that 47 percent of users gave up donating money because of lousy page design, confusing information architecture, cluttered pages, and confusing workflow. Among them, 17 percent couldn't find the donation button because of banner-blindness and over-formatting.

  2. Another 53 percent of users left because of content issues - unclear or missing information and confusing terms.

  3. Most users found violating brand guidelines and consistent color scheme as a turn-off.

Well, this is the price you pay when you hire bad designers, or when you take away design decision making from them. This also happens when you hire someone because they ask for less money than what is required by the market value. It's not their fault. You made a bad decision.


prototyping

Tanja Medic April 14, 2019

How to create effective landing pages

A landing page is independent of the main Web site. It's created specifically to receive the traffic for a campaign. Here are usability guidelines for effective landing pages:




  1. Don't include navigation or other distractions.

  2. Appeal to emotions.

  3. Design for one purpose only - explain who you are, what you do, and purpose of your page.

  4. Include clear compelling headline to capture the interest.

  5. Include images and videos that are connected to your message.

  6. Write content that will keep them energized and interested, and avoid jargon.

  7. Create user friendly forms; short and functional; only the essential information should be sought from users.

  8. Feature customer testimonials highlighting the benefits of your service.

That's it. You're good to go.