I’ve been an iPhone user before. I used a jailbrokeniPhone as the limitations of the original OS are just getting a bit old now. No multi tasking? Icon sorting on the springboard is a mess, camera is a joke. The list goes on…
While jailbreaking fixed some of these issues, like multitasking, and improving the camera slightly, one can tell that the iPhone wasn’t meant to do that natively. It is always a workaround. Therefore the user experience outside of apps was just not good.
Enter Android on the Nexus One: I am using the phone only since a few days but the difference in user experience and workflow is staggering. Basically, the ability of keeping all your essential apps open ALL the time makes all the difference. Somehow the Nexus One manages to keep 10 to 20 apps open at the same time without significantly slowing down. It’s mind-boggling…
What use is there too a chat program like Google Talk or Nimbuzz if it can’t be run in the background like on the iPhone?
Here is an example how this plays out in real life: Today I was finding my way to my appointment in the center of London via Google Maps, checking my friends Latitude, I saw that he was not at the agreed meeting point. I quickly (press home button long brings up task switcher or use 3rd party app) switched to Google Talk to catch him on his Android Device (HTC Hero) to clarify what happened. He tells me where exactly he is and I continue to use Google Maps to get his location. It’s just flawless back and forth switching between two programs that are meant to be used in multitasking mode.
This is how it would be on the iPhone: You simply cannot do what described above as quickly on the iPhone. You start Google Maps, you close it… If you were in a certain view you lose the state… Then you open the chat program, you wait for it to load, you chat, you close it and so on… It’s just boring!
The time of waiting for apps to boot up sucks. The jailbreak solution takes away the loading of the apps but as I said it just is not as smooth as the Android solution. The iPhone is simply meant to only run one app at a time. Which is ridiculous if you think about it.
Arranging the home screen & widgets
Another huge plus is the possibility to arrange your home screen exactly the way you like it.
I bought so many apps on iTunes that I kinda lost oversight over them. If I would’ve been able to group my apps that would’ve been tremendously helpful. Yes, you can move the icons but it’s a joke. You move one and all the other move as well… You don’t exactly get the result you were looking for -> poor experience.
Jailbroken iPhones can use folders but I found them to be a pain to set up and to actually use as they were slowing my iPhone down. Actually the whole jailbreak process slows the iPhone down in my experience – it’s a hack – a good one… but still a hack.
Android has all that stuff natively plus more. You can use folders, arrange icons freely and use widgets on top of that. So i have one screen for games, one screen for office and productivity related apps, one screen for multimedia and so on. It’s just the way it should be…
Essential Applications
Regarding the range of apps: I think that the iPhone definitely has the upper hand here. There are just more apps available on he iPhone. But the Android App Market is catching up really quickly.
Better Google App Integration
Another big plus is the better integration of Google Applications on Android as i use almost every Google App that there is for end users. So that is a massive reason for me to use Android. On the iPhone Gmail sucks (I didn’t like the native iPhone Mail Client btw.). On Android it ROCKS!
I have now basically all the core apps that i was using on the iPhone also on Android. Here is a list:
Spotify
Pretty much the same experience as on iPhone.
Google Maps
Latitude makes so much more sense now because you can just have google maps run in the background and your friends can always see where you are. On iPhone it is sh*t as you couldn’t have maps on all the time.
Google Calendar
Was browser-based on iPhone. This works just better.
Google Talk
Deeply integrated throughout Android. It is always just a click away. If your friends are on Google Talk you will find that you will chat more with them once you have an Android device.
Seesmic Very nicely done Twitter App. Not as good as Tweetie 2, but good enough! I wish it had offline functions.
Facebook
Inbox is still missing. You get an alert when you have a message but it’ll direct you to the browser.
Google Buzz
Browser app. This is the thing though. Browser apps work just so much better on Android. They even thought of removing the browser bar once it is fully loaded. On iPhone they sucked b/c there was too much screen real state covered by Safari.
NewsRob
A google reader client with offline reading capabilities. Great for reading stuff on the tube.
VLC Remote
This program I love. I only recently discovered it on the iPhone along with Airmouse. You can just lie on your bed or couch and remote control VLC on your computer. It’s awesome. The iPhone Version is better done… more features. And Airmouse I haven’t found for Android.
Useit.com
Homepage of Usability Guru Jakob Nielsen. Loads of very useful usability tips. Features the same usable layout since over 10 years now. Love it!
BrainSparks
Jared Spools Blog – News and Ideas on Usability. One of the most active voices on the net on usability
Top 10 Mistakes in Website Usability
Jakob Nielsen’s timeless top 10 list on the biggest mistakes when designing a website. Most of this stuff is still violated today on a lot of big brand websites
Google Analytics The basis for measuring your websites relevant data. Bounce Rate, Site Overlay, Time spent on website… It’s all there. You gotta have it.
Crazyegg This tool is what the google analytics site overlay always should have been. They deliver really good data to see where people click on your website. See the demo. Click on Heatmap and Confetti. Tim Ferriss has also shown a good overview in his “How To Blog” Video.
Usertesting
Get cheap user testing via this website. You pay 29$ per user test. For that you get a flash video that shows you the interaction with the website as well as the spoken commentary of the user.
fivesecondtest this is a really good tool to see if people understand the core message of your website. You upload a picture of your website and people review it for 5 seconds and then write down the 5 things that they remember about your website. you are gonna be surprised to see how little it actually is.
Browsershots
This website enables you to check how your website looks on other systems and browser. They got everything from strange old Unix os up till the modern Mac OS.
Userfly
Insert a line of JavaScript code into your website and get the possibility to play back every user session. You see mouse movement and pages visited just like you would be looking over their shoulder while they interact with your website. immensely helpful.
Chalkmark A tool like crazy egg. Heatmap style evaluation of your web site visitor. It provides something that google analytics would’ve done but didn’t. Great tool.
Desktop-based Usability Tools
StomperNet Scrutinizer
This tool allows you to simulate the squint test by blurring websites and then additionally only shows the area around your mouse in clear view. That helps you to get an idea where people would go first on your website when you test your website with people who don’t know your website and use that tool. In my opinion not as correct as real eye tracking or camera recording of interaction. It also resizes the browser window to a standard size like 1024 x 768 to check if your website complies.
Silverback for Mac only
This software records user session plus iSight user video. So now you can do a user test (speak aloud or similar) record where the person has clicked on your website and also a video with their face and everything they have said. When you play it back you see everything at once. Very handy.
Web-based Accessibility Tools
Accessibility is a very important topic in usability. You want to make sure that as many as people as possible are capable of viewing your content. That includes people who suffer from color blindness or other vision problems. Here are some tools that can help you check on that:
W3C Link Checker & W3C Markup Validator and W3C Css Checker~
These are tools by the W3C to make sure your Markup and CSS is fine as well as links. This is the bare minimum you can do to make your website accessible.
Wave Toolbar for Firefox The WAVE Toolbar provides button options and a menu that will modify the current web page to reveal the underlying accessibility information. It provides an easy-to-use mechanism for evaluating the accessibility and usability of web content for people with disabilities
Fangs Screen Reader Addon for Firefox
Renders a text version of a web page similar to screen reader output. Helps developers find accessibility issues fast.
Firefox Accessibility Extension
The tool supports people with disabilities and web developers in navigating, styling and accessing text equivalents that are useful to people with disabilities.
Lynx Viewer
See how your website behaves in Lynx a text only browser.
Creately.com
Web-based (like google docs) flowchart and ui design tool that gets a lot of buzz recently on the web. I have tried and reviewed it too. Like it a lot. Payment is subscription based
MockFlow
Is a super nice wire framing app. It has loads of components and just way more as the aver application. there are components for almost anything you can imagine on the web. really cool app.
iPlotz
Good web-based wireframe tool. The wire frames look like hand drawn sketches. Quite cool tool. To use it professionally you need to buy a subscription.
Simulify
Another web-based wire frame tool. Based in india. The tool is currently still in development.
Pidoco
Helpful online wireframe testing tool. You can create wire frames that look like they are hand drawn and interlink them and assign actions to items on the page. Check out the demo.
HotGloo
Very good looking wireframing app in beta stage. Liked it quite a lot.
Desktop-based Wireframing Tools
Axure
Highly efficient desktop based wireframe tool. Real good to use and simple to make wire frames. Trouble is, it’s pricey. I think a single licence comes for 500$. Check out the trial software if you like it.
ForeUI
Good desktop based wireframing tool for Windows and Mac.
iRise
Super powerful website structure visualisation and wireframeing tool. Pricing starts at $6,995 for iRise Professional Edition.
Mockup Screens
99.95$ wire frame tool for Windows. Simple to use.
Usability Twitter Accounts to follow
WeFollow.com Usability Users
WeFollow.com asks people through what they define themselves. Here is all the twitter users that have something to do with Usability
Since certain functionalities on websites appear over and over again (login, register, etc) it makes sense to take them from pattern libraries. Here are a few of the best:
UI Patterns
A lot of the most common patterns with screenshots and everything. Powerful website.
The Design of Everyday Things
This book teaches how usability improvements of everyday things could be done. Great read as it gets you in the right mindset for usability improving anything
Designing Web Usability
This book is now quite old but the most of the stuff in there still applies. When you have read this book front to back you know everything to get started seriously in usability improving websites. Your not a pro but well equiped.
Usability Engineering
Another classic by Jakob Nielsen. Easily readable information on usability testing and interface design. Well worth the time spent.
E-Commerce User Experience
Now if you have an online shop (or applicable also to a lot of transaction based websites) THIS is the book you need. I know it’s quite expensive (when i bought it, it was even more expensive) BUT i have never learned so much about design of shopping carts from any other resource. I can only recommend this book.
Envisioning Information
This book is awesome. I was a bit weak sometimes in that area but Tuftes book helped me a lot with it. Presenting information visually is super important in UI as it speaks to both halfs of the brain and makes people understand easier. A must read!
Don’t Make Me Think
Loved this book as it made me much more aware of that core principle in everyday work. Don’t make the user EVER think is key to designing a usable interface. It all needs to be a natural flow. Reduction of unnecessary is as always key to get there… for the rest, read this book.
Homepage Usability: 50 Websites Deconstructed
Now this book changed mostly my perception of home page real estate. I didn’t even know the word/concept but it makes a lot of sense to see your homepage as your most valuable real estate you gotta be ultra sharp about what you place on the homepage. This book takes a look at 50 of the biggest websites homepage and analyzes them to the maximum. Really helpful to solve the ever-present question on what to put on a homepage.
Prioritizing Web Usability
Another Jakob Nielsen masterpiece. Pretty much an update of his latest usability findings. What was helpful was that he addressed the question i always hear in most projects that i work for: “Do we need usability testing”… Nielsen has some good answers on ROI of usability. But the main focus of the book is on giving a comprehensive view of the most important ui principles.
Eyetracking Web Usability
Don’t wanna spam Jakob Nielsen stuff here but i find his books just so useful. This book is about his findings in a 3 year-long eye tracking study where they looked at 1.5 Mil. instances of eye tracking. This book is so important to the average website owner because setting up a eye tracking test is still quite complicated so we usually don’t have access to that kind of data. Well this book is here to aid that…
Filmaster.com asked me to review their website. Overall it’s not to great now but i think they are in beta mode. So they have still time to fix it.
So here it goes:
Main Purpose not easily understandable
The main problem is that the purpose of the website is not easy understandable on the homepage. That needs to be fixed asap. Other wise you’ll loose too many visitors. Cut back on fluff EVERYWHERE.
Site is loading very slow
Movie recommendation engine gave me no recommendations
After logging in via Facebook Connect i got to the movie recommendation engine. Instaed of showing example recommendations that can be refined afterwards you showed me a button saying “compute recommendations” which apparently also might take up to 5 minutes. Firstly 5 mins is waaaay to long. Cache them somehow or whatever but you gotta bring them faster. Secondly even worse i got NO RESULTS. It sad “No recommendations, sorry.” Now if you need input form the use first another method would be to guide them DIRECTLY into the data gathering process (probably rating movies, pointing out movies they liked). So now i have no clue on what basis you are recommending movies to me.
Way too much text and stuff on the homepage.
People have incredible little time these days to grasp what a website is about. I think its around 8 seconds. So you have to cut away EVERYTHING that distracts from the core purpose of the website.
For instance to grasp what “The Planet” link is about i have to read 1.5 lines of text? That is not good. The link should be descriptive enough.
Rate movies should probably be “Movie Recommendations”
What is not good that when i click on it i have to register first. Especially not if its called Rate Movies. The point is that no one will read the explanatory text and when they click on it they expect explanation of the feature which they do not get. Instead they are asked to register. Why register though? So far for the average NEW user the website has shown NO value – so why would you register? So you lose a lot of people there.
there is more but didn’t have the time to write about it…
Search doesn’t stand out
The search has very light coloring and does not jump into the eye at all. Yet it is one of the most important means of navigation on your website. It’s gotta be more attention grabbing.
Don’t be clever, use the established stuff
A lot of times you guys try to be clever. For instance:
What does “The Planet” mean?
I have to read the description to grasp it. Nobody has that kind of time.
You put “You are looking at Filmaster | pre-premiere version” First of all i know that i am looking at Filmaster and 2nd it’s called “beta”. There are sooo little standards on the web. Lets try and use at least the quasi standards.
Under the forum headline on the homepage you put the username above the headline. Nobody knows that these are usernames.
Some Links not recognizeable
Some of the Links are the same color as the rest of the text. While this might look better from a design p.o.v. its horrible for the user experience. I have to mouse over stuff to figure out if it’s a link -> Don’t make me think.
There is more stuff but i didn’t have the time to write it all down… But i think one gets the main point. Site purpose not easily understandable.
In order to fix it:
Either start working with a usability expert on your website or start reading up on all books from Jakob Nielsen and Tog. Here is a list of interaction design ressources by Scott Berkun.
On their user voice powerd feedback system people were asking for new features for the wire frameing part of creately.com and they have actually started adding some stuff:
Yesterday i got a mail that said:
Check out our new composite objects like
1) Login Box
2) Sign-up Box
3) Social Media icons
4) breadcrumb navigation
5) Pop-ups and more
in the UI mockups and Widgets libraries
I got an beta invite to creately. I have to say i quite like it. It definitely goes in the right direction.
It is, as i said still in beta mode. And when i compare it to Axure Pro, which is a desktop app, it’s still lacking features.
Creately is not only for wireframing like Axure Pro is, it is also for all kinds of flow charts and diagrams. I hope that they really further optimize the wireframing aspect of creately. There are quite a lot of tools missing when you compare it to Axure.
Here is a fake wireframe i created in like 5 mins. just as a test in creately:
What i really really like about creately are the sharing options. You can publish your wireframe to a create.ly url within a second. Here is the URL to mine:
Also another highlight are going to be the collaboration options. That’s what i really need most for my kind of work. I need to be able to share my wireframes quickly with my team and have them adapt them if needed. So looking forward
I’ve been long looking for a good online wireframing tool. So far i only found good tools for the desktop but I hate to install new desktop software. I need collaboration features just like with google documents and this is only possible with an online tool.
Sure you could use any online photoshopclone but really what i want is a tool specifically for wireframing. It makes things much easier.
So far I have only found two tools that I seriously consider. Actually one of them, creatily, is still an beta and I hope to get an invitation soon.
The other one is called iPlotz and is actually quite a good wireframe application. The only trouble is with the price point. It is quite expensive.
