Creating User Friendly Joomla! Websites and Forms | Joomla! Day Deutschland
•Als PPT, PDF herunterladen•
1 gefällt mir•893 views
Have you ever visited a website that had no clear navigation? Perhaps clicked on the 'Reset' button at the bottom of a form that you intended to submit? Most likely you blamed yourself for these mistakes, but in most cases it was the web designer at fault here. By properly testing a website with real users (from the first sketches to beyond the final release) most usability problems can easily be fixed (or even prevented). At almost no cost and with only a couple of minutes per week you can do these tests yourself. In this presentation - filled with practical and easy tips - I will teach you how. Stop scaring you visitors away, learn how to make them love your site today! Video from JandBeyond 2012: http://www.youtube.com/watch?feature=player_embedded&v=PE05lDOb41s
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Creating User Friendly Joomla! Websites and Forms | Joomla! Day Deutschland
Ähnlich wie Creating User Friendly Joomla! Websites and Forms | Joomla! Day Deutschland (20)
Mehr von ThemePartner
Mehr von ThemePartner (14)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Creating User Friendly Joomla! Websites and Forms | Joomla! Day Deutschland
- 1. Creating User Friendly Joomla! Websites and Forms Robin Poort (@rhcpoort) CEO & co-founder ThemePartner (@theme_partner) Joomla! day Deutschland, Berlin, oktober 2012
- 46. Time up Robin Poort (@rhcpoort) ThemePartner (@theme_partner)
- 47. Elevator: http://www.flickr.com/photos/ricardodiaz/2311260401/ Car: http://www.flickr.com/photos/19942094@N00/4937185452/ Boy: http://www.flickr.com/photos/mollenborg/4806009069/ Focus: http://www.flickr.com/photos/toolstop/4546017269/ Door: http://www.flickr.com/photos/slightlyeverything/5103581006/ Old photo: http://www.flickr.com/photos/seattlemunicipalarchives/3654163449/ Usability lab: http://www.flickr.com/photos/yandle/2986591710/ Guys: http://www.flickr.com/photos/_dchris/4103382933/ Paper: http://www.flickr.com/photos/english106/4357529719/ Before and after: http://www.flickr.com/photos/35314767@N00/5997466993/ Hourglass: http://www.flickr.com/photos/jamiesrabbits/5641308012/ Questionmark: http://www.flickr.com/photos/horiavarlan/4273168957/
Hinweis der Redaktion
- Welcome. How people surf. Usabilty problems. Some forms. Supermarket? Restaurant? Bar? Big question is elevators
- Should be easy. Press button, Get in, Press button, wait, and get out. Most of the time it's quite a lot harder then that.
- [Hands] 1. Who's been in an elevator before? 2. Who had trouble finding the button for the floor they wanted to go?
- Problems start outside. The dots for the blind people tell you exactly the same.
- Once inside a new challenge. Finiding the right floor. People can do it right! Hotel elevator..
- Clear buttons, light of floor, explain below, alarm and open doors. Theo and I want to write books.
- The next sheet has two buttons. Raise your hand if you think the bottom one is the right one.
- French text. People were using the top one to much.
- Dont't let the user think. Think for them! There's a lot of books about usability. My favorite is the following one
- Read the title. Back button with arrow to right is wrong. Underlined without link is wrong. Important things shouldnt be red.
- Difference in blocks? menu? advertisements? They've improved. Next I'm going to show how people surf the internet nowadays.
- We view with 100km/h. In beginning everything slow. Click here. Find URL somewhere, search engines not normal, anekdote dad.
- Users are in a hurry! When you found the article you don't even take time to read it all.
- Users scan! Way to much information. We need small bits. New social network platform like pinterest...
- Didn't find what you were looking for within 2 seconds? Door number two, back button, the right swipe, or backspace button.
- If it's to hard for you start doing conveyorbelt work. What can we do 2 make hurried people find what they're looking for?
- Test! Testing doesn't has to be very expansive nor time-consuming. Usabilla, silverback, Crazy egg. Test self with little money &time.
- Specific task like sign up for newsletter. Find most read blogs. Order a product. Get an account. Vote poll or things like that.
- Write everything down! Ask user to say what they are thinking. Write down when moving cursor in direction.
- Make adjustments & test again. Start biggest/most found problems. Start with only 3 test users for 75%. Some usability problems. When you wrote everything down it's time to make some adjustments. Start with the most found/ biggest problems. When you've tested your website with four users and they all found it very hard to naviagte to your products because they were called proddies or something like that it's abviius this should change. Don't change everything someone says. Only do it when more people find it a hard task. Starts with only two or three users in your first round because they wil locate 75% of the containing irritations. Then do another round with trhee users and again they will locate 75% of the remainging irritatiuons. When you start with 6 in the first round they might find 85 to 90% of the irritations but that;'s less then what has been found in two rounds.
- #1 slow websites, waitin for site to load Use less js and css. Image sprites. Yslow.
- Joomla.org slow website. Explain CDN.
- The ThemePartner.com homepage. If we wan't to use Google Analytics we will never et a 100% score.
- Problem #2 is Flash! It won't work on iDevices [HANDS] who's got either an iPhone or iPad? Who browses?
- Combine HTML5, CSS3 and js to create cool stuff Examples
- moves around and you can click or tap
- Another example. Not fully working on iPad Do use flash for Pixlr. Not for regular sites.
- #problem 3 404 pages. This is the google 404 page. Funny image makes you feel better. They could improve.
- That's better!
- It looks great and it's got links
- It's got the whole surrounding website
- #4 too much links in navigation areas. Top bar is quite okay but the dropdown is bizar. Advertisements!
- Better. Boss wants popular. Normal weight in menu + breathing. You want ads in your menu? Take Amazon for an example...
- Advertisements can work as amazon shows us. Grey lines between areas is good
- Another example of a great dropdown with separarytors etc.
- #5 ads! Get rid of them. The navigation of this website is an ad? People want to make money so some ads are okay...
- A little better
- Ads can be nice integrated. "Sponsored links"...
- #6 is forms! Path to sale. Contact. Mailing etc. A few example forms now.
- Fields are the same size. There's no flow to the bottom. We've got some red labels. Small font. No caps. Loads of distraction. Unreadable Unresetable captcha. Ugly form. Lines in between = distraction. Spelling mistakes. Go + submit is wrong. It doesn't say what the star sign does. Middle name required. Three! checkboxes. Warning about clicking twice. Example with postal code. Adress instead of streetname. Most important button is only the mailing.
- The error is green + has no breathing space. Checkboxes are checked again. The input in the fields is plain ugly and blue. No idea what went wrong. It's sad but true that most internet fomrs look more like this then the form on the next sheet which I tried to make a little better.
- Great title. Info what's going to happen next. Alternative contact possibilty. All fields are required. Help sign what to do. Resizable message field. Privacy statement
- No privacy statement. Inline field help.It doesn't say what the star sign means. Two CTA-buttons but one is Cancel. No resizable message field. Postal code field is short.
- Clear error message. An icon and a color to show that something is off. What should I do to fix it? Same icon downstairs and same color. Very clear error.
- I've told you guys quite some things. I'm sure there's questions in the room. Who's got the first one for me?
- Follow me or talk to me later today