Understanding Learnability for Web Design: Tips and Best Practices – Designmodo
by Profit
Understanding Learnability for Web Design: Tips and Best Practices
Building a learnable website is much tougher than it sounds. The goal should be a clear user experience that visitors can quickly pick up and understand.
Mobile app designers can solve this through onboarding which helps users learn the interface. But websites can’t always offer lengthy tutorials.
Let’s take a look at learnability and see how you can apply these techniques to your websites. Most visitors know how to browse the web so it’s not really about making interfaces that people learn, but rather just following conventions so they’re comfortable using your site.
Why Learnability Matter
People engage more with an interface once they know how to use it. Conversely, people bounce away from interfaces that just look horribly convoluted.
You want to design for learnability so that people stick around. The goal is to help them learn your interface fast so they can keep using it. This way you get more repeat users and the site has a lower bounce rate.
Interaction design should be learnable, or at least shouldn’t require the designer to teach people how to use the interface. This doesn’t work for complex software like Photoshop but a website is not complex software.
For example, everyone knows Amazon’s website. It’s full of thousands of categories and millions of products. With that much content you’d expect it to be a mess.
Yet browsing and searching Amazon really isn’t too hard. Why?
Because they focus on relevant components that help people make sense of the interface.
With more complex page elements you don’t always need to rely on common sense. For example, Twitter uses little tooltip hints when you hover some elements in the UI.
Their goal is to encourage more user interaction and help people keep using Twitter. It’s a guaranteed way to increase the total userbase and encourage a higher retention rate.
With that in mind let’s go a bit deeper into a few techniques for a learnable website.
Consistency Breeds Familiarity
I mentioned earlier how a consistent interface is necessary for a good design. This means you want to use common page elements that people are familiar with and keep them similar in the long term.
Certain elements should remain in the same place on every page. Your navigation, logo, and main content area should all be easy to find.
But more complex applications need to go further than just info content. Take for example the Dropbox backend which has looked basically the same since they launched.
Once a user learns the Dropbox interface they never need to re-learn it. That’s the goal of consistency.
When someone returns to Dropbox for a 2nd time they’ll already be familiar with it. Once people have been using it for a while they’ll get familiar with the UI and expect it to behave a certain way.
You can find this same technique on blogs & content sites too, it’s just less pronounced. For example WebDesigner Depot launched a redesign and changed all their hover events to use a moving animation effect.
Now when you have any of the featured story pics, the headlines, or any of the navigation links, you’ll notice there’s a small animation moving those items towards the right.
This remains consistent across the site and it tells visitors what to expect.
Look for consistency in your design and keep those elements consistent as long as possible.
UI Response & Feedback
The mobile world often talks about micro interactions and how these affect behavior. Those interactions are usually animations or UI responses to user behaviors and they’re crucial to a learnable interface.
Users need evidence that what they’ve done (clicked, submitted a form, entered content) actually had an effect on the page.
You can do this with simple animation effects or by creating page elements that respond to users.
One great example is the signup form on MailChimp’s registration page.
As you enter a password for your account MailChimp’s UI automatically crosses off certain requirements when you hit them. For example, passwords are required to have at least 8 characters in length.
So once you type 8 characters that little item crosses out. It shows that your keystrokes are affecting the page and the user can then learn how the password field works.
Another great example is the Photojojo eCommerce product page layout.
Whenever you click “add to cart” the page scrolls up towards the top where you’ll see a tooltip with an overview of your shopping cart.
This response from the interface lets you know that you just added something to your cart. It’s a clear indicator that your mouse click did something.
Follow Standard Conventions
I’ve talked about standards in web design before covering the value of consistency for web layouts.
If you’re designing a website meant for average everyday use then you need to follow conventions. It is not the time to get creative or start messing with common expectations.
Visitors want to see navigation menus right at the top. Links should work by hovering and clicking, and if there’s a dropdown it should appear right away.
If you’re designing for learnability then don’t try to reinvent the wheel. Instead look at what everyone else is doing(at least the good stuff) and stick to it.
For example this checkout page includes small plus/minus icons for changing the quantity before checkout.
It’s a very common feature in ecommerce shops and users just inherently know how to use it.
The more common an interface feature is, the greater the likelihood that people will just intuitively understand.
Same goes for blog layouts. Aim for a strong navigation at the top with blog categories, clearly visible headlines, a top-of-page featured image, then the body of the article.
Stick with what works and try looking at other sites for inspiration.
For blogs you might try looking at other simpler blogs or even online magazines to see which elements they all share. If you see something on dozens of websites then it’s a cue to replicate that on your own.
And you might even need to consider standard conventions based on your own design once it’s been around long enough.
For example, Google’s SERPS page has basically looked the same for decades. Yes it has changed a little, but for the most part it really hasn’t.
Stay consistent with your own conventions. Don’t radically redesign your site one day without any way to change back—learn from the failure of Digg v4 and their insane UI change.
Once your design has been online long enough you can bet a lot of people have grown familiar with your conventions. Try to avoid changing these too much.
Granted these tips are just the beginning of learnability so it’s essential to put these ideas into practice and see how they work.
And if you’re looking for more stuff to read I highly recommend these awesome articles:
- Usability vs. Learnability
- When is Learnability More Important than Usability?
- Make it Easy on the User: Designing for Discoverability within Mobile Apps
https://designmodo.com/learnable-web-design/
On – 12 Jan, 2018 By Jake Rocheleau
Recommended Posts
Local SEO in 2018: 12 Tips to Build Local Engagement
March 27, 2018
15 Link Building Tactics to Supercharge Your SEO Efforts
March 27, 2018
Comments
Comments are closed.
keto indian food https://ketorecipesnew.com/
13 year old gay dating sites https://freegaychatnew.com/
gay dating sites australia https://gaychatrooms.org/
gay dating cock pics https://gaychatus.com/
danger gay dating site https://gaydatingzz.com/
new gay dating game https://gaychatgay.com/
gay dating without sign up https://dating-gaym.com/
gay asian dating site https://datinggayservices.com/
gay indian dating https://gay-singles-dating.com/
online gay teen dating https://gaydatinglosangeles.com/
[…] how to buy levitra in canada […]
[…] how do you order viagra […]
esl essay writing https://essaywritercentral.com/
what to write college essay about https://essayghostwriter.com/
pay essay writing https://essaysnet.com/
reflection essay on writing https://essaytag.com/
website that write essays for you https://essaypoints.com/
write an analysis essay https://onlinecasinos4me.com/
what to write about in a college essay https://online2casino.com/
[…] cialis 20mg pharmatize […]
[…] viagra online […]
[…] generic cialis 20mg […]
[…] best over the counter erection pills […]
[…] cheap levitra online […]
[…] cialis best buy […]
united states online casino https://casinoonlinet.com/
free casinos bonus https://onlinecasinoad.com/
online casino deposit bonus https://casinoonlinek.com/
write college essays https://student-essay.com/
where can i buy an essay https://essaytodo.com/
paid to write essays https://dollaressays.com/
writing a biography essay https://buy1essay.com/
[…] viagra cheap discount […]
[…] best gambling casino […]
top ten sex games https://cybersexgames.net/
sex games hentai https://sexgameszone.com/
albanian women play sex games https://sexygamess.com/
sex games college guess https://sex4games.com/
gay furry sex games https://sexgamesx.net/
[…] 25mg sildenafil walmart […]
[…] roman cialis […]
[…] is 40mg of cialis super active too much […]
[…] viagra pfizer 100 mg online […]
1exuberance
elderly gay men dating site https://gaypridee.com
growls gay dating https://gay-buddies.com
macro sonic dating sim gay https://gayprideusa.com
gay french dating https://speedgaydate.com
[…] online casinos accept paypal canada […]
2airlines
[…] cialis ed pills […]
[…] sildenafil pills buy […]
gay video chat tumblr https://bjsgaychatroom.info/
free gay chat lines in fitchburg,ma https://gay-buddies.com/
[…] cialis coupons […]
[…] herbal viagra sale ireland […]
[…] cialis from canada […]
[…] male and female viagra […]
[…] cheap viagra soft […]
ivermectin 50ml
ivermectin tablet price
home page home page
generic albuterol tablets
stromectol for humans
ivermectin 4000 mcg
cheapest online generic cialis
tadala
alliance rx
flccc ivermectin
i mask protocol
flccc
free slots online games https://2-free-slots.com/
indiana grand slots list https://freeonlneslotmachine.com/
operation slots https://candylandslotmachine.com/
geisha slots on pc https://pennyslotmachines.org/
mobile deluxe slots https://slotmachinesworld.com/
imask protocol flccc
flccc website
best price on ivermectin pills
generic ivermectin for humans
cost of ivermectin cream
ivermectin antiviral
where to buy ivermectin pills
stromectol usa
price of ivermectin liquid
ivermectin 0.5% brand name
stromectol online
ivermectin lice oral
ivermectin 15 mg
stromectol price usa
ivermectin 1%
ivermectin uk buy
ivermectin 6mg dosage
stromectol xr
ivermectin australia
buy ivermectin online
ivermectin where to buy
ivermectin for humans
[…] buy viagra express delivery […]
ivermectin cost
ivermectin in canada
cost of ivermectin
where to buy ivermectin
how much does ivermectin cost
ivermectin for sale
stromectol tablets
ivermectin ontario
free slots for pc https://slotmachinesforum.net/
imask protocol
ivermectin online
buy stromectol
ivermectin where to buy
free wizard of oz slots https://slot-machine-sale.com/
ruby slippers slots https://beat-slot-machines.com/
free cats slots https://download-slot-machines.com/
icy wilds slots https://411slotmachine.com/
where to buy ivermectin
flccc ivermectin
ignition casino facebook
ignition casino help
free slots real cash https://www-slotmachines.com/
tadalafil online purchase
cheap cialis online from india
bio dr. jorgen slots https://slotmachinegameinfo.com/
ivermectin ontario
where can i buy ivermectin
where can i buy ivermectin
ivermectin coronavirus
buy generic prednisone 10mg
prednisone order
tadalafil vs sildenafil
buy online
buy ventolin inhaler
can you buy ventolin inhalers at asda
canadian pharmacies provigil
provigil 100 mg cost
provigil 100 mg cost
provigil cialis
buy tadalafil online
cialis 20mg online
cialis dosis
buy cialis online
very cheap viagra uk
sildenafil price walmart
best price usa tadalafil
medshuku best place to buy cialis online
canada drugs
medshuku buy cialis online
dissertation paper https://buydissertationhelp.com/
cialis buy cialis without prescription
cheap canadian drugs
professional dissertation help https://dissertationwriting-service.com/
cheap generic cialis canadian pharmacy
canadian cialis
happy family store sildenafil pills
sildenafil pills online purchase
dissertation help writing https://help-with-dissertations.com/
help-seeking dissertation https://mydissertationwritinghelp.com/
writing an msc dissertation https://dissertations-writing.org/
dissertation editor cost https://helpon-doctoral-dissertations.net/
how to buy sildenafil pills
sildenafil citrate
generic
generic for cialis
india pharmacy cialis
viagra cialis levitra
cialis kaufen
cialis dose
buy prednisone india
buy prednisone 20mg tablets
prednisone 20mg for asthma
uso prednisone 20mg
prednisone side effects in dogs
does prednisone make you sleepy
buy generic cialis online
cheap tadalafil
buy generic cialis online
how can i get cheap cialis
buy doxycycline online australia
doxycycline buy usa
buy generic cialis online
cialis tablets
tadalafil liquid
tadalafil liquid
ivermectina tabletas
cost of ivermectin
[…] orjinal cialis 20 mg nasıl anlaşılır […]
buy ivermectin nz
buy ivermectin nz
ivermectin 1 cream
stromectol 0 5 mg
furosemide 80 mg buy online
lasix without a rx
furosemide uk drug
buy furosemide 100 mg online
ivermectin 1mg
best price on ivermectin pills
tadalafil goodrx
tadalafil dosages
what is ivermectin used for humans
ivermectin uk coronavirus
stromectol 3 mg dosage
buy ivermectin for humans
where can i buy ivermectin
buy stromectol tablets
stromectol tablete cena
ivermectin medicine
luckyland login
luckyland slots casino login
ivermectin lice
ivermectin over the counter canada
ivermectin paste for sale
tractor supply ivermectin pills
stromectol for sale
ivermectin cost australia
stromectol order
stromectol order
ivermectin purchasing
stromectol prescription
2belligerent
books thesis dissertation help https://professionaldissertationwriting.org/
undergraduate dissertation https://professionaldissertationwriting.com/
phd dissertation example https://helpwithdissertationwritinglondon.com/
custom dissertation writing service 2019 https://dissertationwritingcenter.com/
search writing help https://dissertationhelpexpert.com/
dissertation service https://accountingdissertationhelp.com/
dissertation template https://examplesofdissertation.com/
phd dissertation help proposal https://writing-a-dissertation.net/
writing your dissertation in a week https://bestdissertationwritingservice.net/
writing papers https://businessdissertationhelp.com/
best dissertation writing https://customdissertationwritinghelp.com/
dissertation defense questions https://writingadissertationproposal.com/
buy art online berlin https://dissertationhelpspecialist.com/
writing papers https://dissertationhelperhub.com/
best dissertation writing services uk https://customthesiswritingservices.com/
ocean casino online https://download-casino-slots.com/
watch casino online https://firstonlinecasino.org/
best payout online casino https://onlinecasinofortunes.com/
gta online casino heist payout https://newlasvegascasinos.com/
was bedeutetwaygern online casino https://trust-online-casino.com/
best online casino reviews https://onlinecasinosdirectory.org/
fantasy springs online casino https://9lineslotscasino.com/
casino online portugal https://free-online-casinos.net/
online casino welcome bonus https://internet-casinos-online.net/
slots online casino free https://cybertimeonlinecasino.com/
golden nugget online casino promo https://1freeslotscasino.com/
parx casino online https://vrgamescasino.com/
bovada casino online https://casino-online-roulette.com/
best online casino bonus usa https://casino-online-jackpot.com/
online casino no deposit bonus codes https://onlineplayerscasino.com/
top online casino bonuses https://ownonlinecasino.com/
online casino paysafecard 10€ https://all-online-casino-games.com/
wind creek casino online games homepage https://casino8online.com/
vpn free windows https://freevpnconnection.com/
vpn for pc windows 10 free https://shiva-vpn.com/
how to buy vpn anonymously https://freehostingvpn.com/
vpn to buy flights https://ippowervpn.net/
google vpn free https://imfreevpn.net/
vpn free mac https://superfreevpn.net/
best cheap vpn reddit https://free-vpn-proxy.com/
free vpn for windows 10 https://rsvpnorthvalley.com/
gay punk dating https://gayedating.com/
senior bi log in https://freephotodating.com/
online-dating-ukraine https://onlinedatingbabes.com/
free site for dating https://adult-singles-online-dating.com/
chinese dating show https://adult-classifieds-online-dating.com/
onlinelovedating https://online-internet-dating.net/
dating services for seniors https://speedatingwebsites.com/
connecting singles dating site https://datingpersonalsonline.com/
singles dating https://wowdatingsites.com/
best dating online site https://lavaonlinedating.com/
free online dating https://freeadultdatingpasses.com/
good dating site https://zonlinedating.com/
dating apps https://onlinedatingservicesecrets.com/
vegas world free online casino games https://onlinecasinos4me.com/
online casino paypal https://online2casino.com/
online casino ideal https://casinosonlinex.com/
gay chat ca, https://newgaychat.com/
men 4 you gay chat https://gaychatcams.net/
chat gay https://gaychatspots.com/
michigan gay chat https://gay-live-chat.net/
gay chat room in my area https://chatcongays.com/
random gay video chat https://gayphillychat.com/
first time gay chat https://gaychatnorules.com/
gay chat safe https://gaymusclechatrooms.com/
chat avenue gay https://free-gay-sex-chat.com/
local gay chat rooms https://gaymanchatrooms.com/
custom written college papers https://term-paper-help.org/
pay to write a paper https://sociologypapershelp.com/
help me write my paper https://uktermpaperwriters.com/
pay someone to write a paper for me https://writepapersformoney.com/
how to write my paper https://write-my-paper-for-me.org/
pay to write a paper https://top100custompapernapkins.com/
what is the best paper writing service https://cheapcustompaper.org/
buy papers online cheap https://writingpaperservice.net/
college paper service https://mypaperwritinghelp.com/
paper writer services https://writemypaperquick.com/
https://essaybuypaper.com/
college papers help https://papercranewritingservices.com/
college paper service https://premiumpapershelp.com/
who can write my paper https://ypaywallpapers.com/
buy college papers https://studentpaperhelp.com/