User Experience 101 – Amazon’s Dropdown

March 6, 2013

heinen Aaron Heinen, Software Development, User Interfaces Leave a comment

Dropdown menu navigation can be tricky especially when unleashing it upon millions of people, you need to take into account intent, not just strict HTML guideline functionality.

The basic problem is maintaining a quick response time while maintaining the correct dropdown menu the user is intent on, this closely borders on programming to read minds.

An example of the problem with a strict dropdown menu. It is very responsive but there is no intent so the user must follow a determined path with their mouse or the dropdown instantly disappears.

An example of the problem with a strict dropdown menu. It is very responsive but there is no intent so the user must follow a determined path with their mouse or the dropdown instantly disappears.

Amazon seemingly solved this with a plugin called jQuery Menu Aim. What this plugin does is triangulate the path a user’s mouse would take from the parent dropdown item, to the child dropdown list itself, thus not switching or removing the open dropdown list if a user quick hovers over another parent item on their way to the children.

Mouse triangulation. Incredible User Experience improvement

Mouse triangulation. Incredible User Experience improvement

Like all good design, this probably goes unnoticed by the user but it sure would be noticable if it didn’t exist.

Credit: Ben Kamens – Khan Academy

Adobe Shadow

August 3, 2012

heinen Android, iOS, Mobile Devices, Software Development, Technology, User Interfaces 2 Comments

Gone are the days of the tedious workflow to test websites on a mobile device.

Before the workflow was

  1. Save and upload your (updated) files to a web server
  2. Navigate to the page from your mobile device, usually taking ~30 seconds to type in the URL every single time
  3. Check and wonder why things aren’t showing up correctly
  4. Fight off the urge to throw your device through a window
  5. Make some minor CSS tweak that probably isn’t the root of the problem
  6. Re-upload
  7. Re-Navigate
  8. Re-Check
  9. Re-Fight off the urge, etc.

The new workflow (after you have Shadow setup) is

  1. Save and upload your (updated) files to a web server
  2. Navigate to the URL from your desktop and have it automatically load on every device you have Shadow running on

    3. I only have to load the webpage on my laptop and it automatically updates WHAAAAA!!!??!?!

  3. Inspect the source of any device directly from your laptop

    4. “Inspect the element from your PC and your mobile device updates as if it were on your PC. BAM TECHNOLOGY

  4. Make Changes from within the developer tools and see them update instantly on your device
  5. Go golfing with all that extra time and headache you just saved yourself

How does it work!?

You need the Adobe Shadow “server” running on your PC.

You then need to download the Chrome extension to install and manage your clients from

Last but not least you need to download the “Adobe Shadow” App on every device you will be testing from. Once it is downloaded and the Server is running your devices will recognize the computer and give you a passcode to connect. 

Enter the passcode into the extension

and BINGO. You are now a wizard.

 

Downside?

It doesn’t work locally. – I can’t hold it against it but for all you CSS Wizards out there:

Weekly Roundup – May 25

May 25, 2012

heinen Android, iOS, Mobile Devices, Social Networking, Technology, User Interfaces, Weekly Roundup Leave a comment

Facebook has its eyes set on the mobile horizon

It is a well known fact that the Facebook app / mobile experience is lacking.

This image sums up the majority of my experience with Facebook’s mobile app. I know I’m not the only one. Facebook has been rumored to be working on their own smartphone and even if this is not true I think they should be.

Imagine if the Facebook Mobile experience could be as seamless as the desktop experience. That is why it is a big deal when rumors of an Opera acquisition start going around. While Opera isn’t the most popular browser it does boast an extremely impressive mobile market with over 168 million (mobile) users in March alone.

Whether or not this deal will transpire is beside the point that Facebook needs to improve their mobile experience. It doesn’t do much good to wait ~20 seconds for a news feed that I want to check for ~10 seconds while on the go.

The full story is available here

“Facebook officially declined to comment.“

 

 

 

Siri-ous problems

IBM bans Siri from Employee phones

It was released this week that all the data you have ever spoke to Siri, incidentally, has been recorded by Apple.

Full Story

Siri changes answer to the “Best Phone Ever” question

Apple may have noticed, from all their data tracking, that the question “What is the best smartphone?” was being asked by many users. Prior to this week Siri did as it should, answered honestly from a search of customer feedback.

While I personally wouldn’t agree that the Nokia – Lumia 900 is “The Best Smartphone” at least it provided an honest answer. This is what you will see now if you ask Siri what the “Best Smartphone” is.

This answers seems a bit more subjective…

Siri was also updated to include a sarcastic response “You’re kidding, right?”

Gamerchanger of the Week

The Moai, Easter Island giant head statues, have … wait for it… buried bodies!!

Pictures of an Excavation

 

Google ‘Plays’ With Fire

March 10, 2012

heinen Android, Mobile Devices, User Interfaces 1 Comment

Google playfully decided to change the name of their Professional and well respected ‘Android Market’ to encompass additional devices, ie. GoogleTV. Despite the obvious complaints about the decision of the new name ‘Google Play’, Google really could not have made the conversion worse if they tried. Granted when you opened the ‘Market’ there was an obvious pop-up that told users the store was being ‘upgraded’ to ‘Google Play Store’ which they had to agree to before entering the store. This takes into account that users read pop-ups before hitting accept. Where Google really went wrong was by not replacing the ‘Market’ Icon with the ‘Play Store’ Icon. It was just gone. This sparked a whole plethora of confusion with users outraged, spouting things like a virus deleting their market to, my personal favorite, blaming their child for deleting it.

Angry Users

It’s well known that people largely don’t read click-through text. It’s simply a usability issue. It’s something that pops up and blocks the user from what they want to see or accomplish. The (average) user instantly does the logical thing and dismisses it (agrees to it) ASAP so they can get on with their task. You can’t even blame the user for this response, Google needs to take this opportunity to learn from this experience. From now on when they are going to make sweeping changes that require a user to click ‘I accept’ they should also blast an audio file “THE ANDROID MARKET IS NOW  GOOGLE PLAY. THANK YOU FOR NOT FREAKING OUT AND CALLING TECH SUPPORT”

Also, I was quite excited to rent movies directly on my phone for $0.99. It is cheaper and much more convenient than redbox. Then there was this:

While the decision to offer rentals to rooted users isn’t even within Google’s control, it’s a backward model of control. It is denying users that WANT to pay for a rental. If a user is going to torrent, a user is going to torrent. By blocking rooted users over the fear of them copying the file to their phone they are really just turning down paying customers.

Don’t piss off your market app or it will be deleted off your phone by itself.

Designing and Developing Applications in an Ever-Changing Mobile Space

January 5, 2012

hardin Android, Design, iOS, Jon Hardin, Mobile Devices, Software Development, User Interfaces 3 Comments

I recently gave a talk to the Middleton Chamber of Commerce about mobile application development, especially related to fragmentation of devices and operating systems. I thought it would be worth posting here, so here it is:

iWebcomix: A Hardin DD Original

December 24, 2011

hardin Design, Hardin Staff, iOS, iWebcomix, Jon Hardin, Matt Togstad, Mobile Devices, Neil Goodman, Software Development, User Interfaces 1 Comment

We’ve just released our first original app, iWebcomix! iWebcomix is an easy to use reader that lets you choose your favorite web comics, browse issues, and read them much more easily than using a web browser. It also notifies you when new issues are available, and is a great way to discover new comics. iWebcomix currently maintains listings for the following popular comics:

Abstruse Goose, Basic Instructions, Buttersafe, Cyanide And Happiness, Girl Genius Online, Left Handed Toons, Maybe Next Wednesday, Milk for Dead Hamsters, Natalie Dee, Nerf This, Penny Arcade, Pie Comics, PVP Online, Saturday Morning Breakfast Cereal, Short Attention Span, Spud Comics, The Adam Comic, The Oatmeal, The Perry Bible Fellowship, XKCD

More are being added every week!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Good UI Design Through Mockups

December 7, 2011

hardin Design, Jon Hardin, Software Development, User Interfaces Leave a comment

At Hardin, when we begin the process of developing software, we’ve found that it’s vital to separate the artistic component of design from the usability, “human computer interaction” component. When you combine the two, it’s way too easy for both designer and client to get caught up in the small details of which gradient or texture or font or image looks the best, which while important should not overshadow the usability of the interface. Our approach to design focuses on first nailing the UI through mockups, then skinning it with great looking art. We’ve had great success doing this using mockup tools (such as Balsamiq), which make designs look like they are hand-drawn so as not to confuse them with drafts of artwork. In Balsamiq’s own words, regarding their rapid wireframing tool:

Mockups reproduce the experience of sketching interfaces on a whiteboard, but using your computer, so they’re easier to share, modify, and get honest feedback on. Wireframes made with mockups look like sketches, so stakeholders won’t get distracted by little details, and instead can focus on what’s really important instead.

We’ve used these tools to great effect on many projects. Below are two recent examples, one a pure mockup and the other a series of mocked up components overtop of an existing interface:

We always like to introduce people to some of the tools that help us produce great software, and Balsamiq is certainly one of them. If you’ve never seen it before and are curious, check out their introductory video: