Creating User Friendly Joomla! Websites and Forms [English]
•Download as PPT, PDF•
0 likes•599 views
The document discusses creating user friendly Joomla websites and forms. It was presented by Robin Poort, CEO and co-founder of ThemePartner, at the J and Beyond conference in Bad Nauheim, Germany in May 2012. The presentation focused on designing intuitive and easy to use interfaces for Joomla through best practices for forms, navigation, and content organization.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (7)
Similar to Creating User Friendly Joomla! Websites and Forms [English]
Similar to Creating User Friendly Joomla! Websites and Forms [English] (20)
More from ThemePartner
Recently uploaded
Recently uploaded (20)
Creating User Friendly Joomla! Websites and Forms [English]
- 1. Creating User Friendly Joomla! Websites and Forms Robin Poort (@rhcpoort) CEO & co-founder ThemePartner (@theme_partner) J and Beyond, Bad Nauheim, may 2012
- 49. Time up Robin Poort (@rhcpoort) ThemePartner (@theme_partner)
- 50. 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/
Editor's Notes
- Welcome. How people surf the internet. Some usabilty problems. Then some forms. Supermarket? Restaurant? Bar? Biggest question is elevators
- Should be easy. Press a button, Get into the elevator, Press another 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?
- Starts outside. Will this open or close and whats the difference? The dots for the blind people tell you exactly the same message. Isn't it just the same then?
- Once inside a new challenge. Finiding the right floor. Theo and I want to write books.
- The next sheet has two buttons. Please raise your hand if you think the bottom one is the one you have to press.
- French text. People were using the top one to much It has french text. So the french should be able to find out which button they would need. Every non-french speaking person has more problems with it. Turns out people were using the top button to much so the elevator guys read our book and made the following changes..
- Dont't let the user think. Think for them! There's also a lot of books about usability. One of my favorites is the following one
- Read the title. Back button with arrow to right is wrong. Underlined without link is wrong. Something important shouldnt be red. DONT MAKE ME THINK, Common sense approach. Don't let the user think and do things because they are logical. A back button with an arrow pointing right won't do it. Make sure that only links get underlined. Make important things bold or another color but do not underline them. And don't show a red confirmation block when you did something good. Even if your companies branding is all red.
- What's the difference between the blocks? Where's my menu? What is advertisment and what not? They've got an improved website now. [WATER] Next I'm going to show how people surf the internet nowadays.
- We view websites with 100 km/h In the beginning of the internet everything slow. Something said: "click here", I would click! You would find URLS in the paper and on some places in the streets. Your web-world was so much smaller when you never herad of search engines. [ANEKDOTE DAD]
- Users are in a hurry! When you found the article you were looking for you don't even take the time to read it all. Users are always in a hurry. So they're not only going everywhere very fast but they also have no time doing want the started doing. When you found the article you were looking for you don't even take the time to read it all. Once you've found what you needed you can go on and get to your other tasks.
- Users scan! Way to much information. New social network platform like pinterest... Users scan. We only need a little bit information presented at a website. Therefore we scan for headings and images and hope we find what we want very quick. Websites are way to stuffed nowadays. When there's a new social platform it has got to be implemented in the website. Developers don't even consider wether the platform is useful to their brand/website
- Didn't find what you were looking for within 2 seconds? Then door number two, also known as the back button, the right swipe, or backspace button are closer then you want as a webdeveloper.
- If it's to hard for you start doing conveyorbelt work. [WATER] What can we do to make hurried people find what they're looking for? If this sounds like you won't be able to reach your visitors on any level because they are gone to quickly. In other words: if running a website is to hard for you, you can always work behind a conveyor belt. [WATER] What can we do to make sure these unfocused people in a hurry do find what they are looking for in your website?
- You test your shit! Look at this guy being proud of his testing lab. I would be just as proud if I owned this all! But testing doesn't has to be very expansive nor time-consuming. Software: Usabilla, silverback, , Crazy egg, You can test your websites yourself with only a few minutes/hours per month for only a couple of bucks.
- a specific task like signing up for the newsletter. Find the most read blogs. Order a product. Get an account. Vote the poll or things like that. Step 1: Grab your old trusted MC-Shark laptop and ask someone close (like a bother, friend or grandma) to surf on your website. You could either just let them click around to see where they are going to or give them a specific task like signing up for the newsletter. Find the most read blogs. Order a product. Get an account. Vote the poll or things like that.
- Write everything down! Ask the user to say everything they are thinkg. This way you know exaclty what's going on inside their heads. Also write it down when the user is moving his or her mouse somewhere or when the tend to look in a certain direction.
- Make adjustments and test again. Start with the biggest /most found problems. Start with only 3 test users for 75%. [WATER] 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. Some usability problems
- #1 slow websites, waitin for site to load Solution? Use less javascript and combine them in one sheet. The same goes for CSS. Use less images and use an image sprite and even make the image sprite smaller. There's a super handy tool which tells you what you can do to make your website faster. It's called ySlow.
- Put you files on a set of servers all around the world. When we go tot Joomla.org here in Germany it would get all files form the closest server available. This means less hops and faster loading pages. This is what you get when you use yslow on joomla.org. Way to much requests for both js and css. Joomla should use a Content Delivery Network because of internationalization. What is this? And correct me if I'm wrong technical people in the room! Put you files on a set of servers all around the world. When we go tot Joomla.org here in Germany it would get all files form the closest server available. This means less hops and faster loading pages.
- The ThemePartner.com homepage. If we wan't to use Google Analytics we will never et a 100% score. Bummer!
- Problem #2 is Flash! It won't work on iDevices [HANDS] who's got either an iPhone or iPad? And who's using these devices for browsing the web every now and then? Banners don't show. Whole websites and pieces of websites are still being created in flash. It's not working. The only positive thing is that banners won't show on your iDevice. Too bad those companies found better solutions.
- You can use HTML5 and CSS3 in combination eith javascript to create a lot of things you want to do in flash. Example
- Another example. I'm saying you should ban flash for everything. Some webapps are better off usgin flash and they won't be used on iDevces anyways. Just don't use it when you are building a regular website.
- #problem 3 404 pages. This is the google 404 page. A bit weird i'd say. This is all we know. A funny image to make you feel better. I'd suggest adding some things like a few links and a search bar. You are Google, how hard can it be?
- That's better!
- It looks great and it's got links
- It's got the whole surrounding website
- #4 way to many links in navigation areas. It's only in the way. Top bar is quite okay but the dropdown is bizar. There's screaming advertisement in this menu.
- This is a little better. The most poplar had to stay. Normal weight in right menu + some more bereathing space. You want ads in your menu? Take Amazon for an example...
- Advertisements can work as amazon shows us.
- Another example of a great dropdown with separarytors etc.
- #5 Loads of ads! Get rid of them. The navigation of this website is an ad? People want to make money so some ads are okay but this is a little over the top i'd say!
- A little better
- Ads can be nice integrated
- #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. Load sof distraction. Unreadable 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 streetnme. 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. [WATER] 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 fiels 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.
- It says April even tho the sales closed in may. There's no breathing space around the steps. They do have clear steps wich is great. There's a promotion code button whichs is bad. Why? Because people will look for promo's because they think there's a promo. They feel bad when they can't find the discount.
- I don't need an account. Telephone field could be shorter. Country field could be shorter. Great safe shopping message. Great back button in gray. Clear message at the top
- The cross icon is only showed once. There's no breathing space in the error below. Clear statement of what to do.
- There's a weird recommended expansive option which looks like it's the most important. It's not nescesary to select which card you've got since every creditcard comapny has it's own set of numbers to start with. Security code could be smaller. If there's no other options then E-ticket don't present it with a radio box but just say I'm ordering e-tickets
- 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