Getting to Know Chrome’s Development Tools

This past Saturday (May 5th, 2012) I attended and presented at the Iowa Code Camp in Cedar Rapids, IA, USA.  The event was filled with a number of great speakers from the midwest discussing anything from code to start-ups to jobs and tools.

One of the presentations that I gave on that day focused on getting people familiar with Chrome’s development tools.  While this is a topic I could present for 2-3 hours, the time slot was only an hour so the content had to be truncated a bit.  If you are curious to see the presentation, please feel free to check out the recording below.

Continue reading Getting to Know Chrome’s Development Tools

Usability Tests and Mobile Devices

As new devices enter the mix, finding ways to conduct effective usability tests of our applications and websites on them becomes a challenge.  In some cases, the best option is to just use a camcorder to focus on the screen even though it’s not as direct screen sharing and screen capturing utilities.

Thankfully, the latest generation of iOS devices have the ability to do screen sharing via Apple’s AirPlay mirroring.  While AirPlay mirroring is primarily designed to project the screen onto a television via an AppleTV, a couple applications have came onto the market that allows for a Mac to be used as the AirPlay server.

Below is a very quick video I put together to look it over and how well it works with my screen capture app (Specflow).

If you’re looking for a way to test iPad or iPhone applications or how a website looks on such, I highly recommend checking out utilities like Reflection in order to allow easy screen capturing and audio input of tests in your usability lab.

Notes from “Buttons are a Hack”

The following are my notes taken on 12 January 2012 while watching the UIE Virtual Seminar “Buttons are a Hack” presented by Josh Clark (@globalmoxie).  These notes are very raw even though some additional phrasing and context have been applied to such below.

  • Using Mice and Pointers are prosthetics that have helped us interact with a computer.
  • As screen sizes increase, traditional controls feel cramped in large touch screens since their relative positions traditionally do not scale. (Responsive design can sometimes address this issue but not always and shouldn’t be considered the only way).
  • Fitts’s Law may apply greater to touch screens due to the grander of gesture over that of just a mouse.
  • “Let People Be Lazy”
    • Pinball Machines are button-based mechanical devices – how would it be without the use of buttons?
    • Answer – if a pinball’s glass is removed, grabbing a ball and attempting to throw/roll it towards the target becomes the primary action (know from person experience while growing up). 
  • How can we more effectively use visual shortcuts and hints?
  • Keep Buttons but provide gestures as a shortcut (not a replacement)
  • “Big Screens require Big Gestures” – both in natural action and in possibilities.
  • Buttons originated in mechanical, clockwork devices – thinking of a webpage as a clockwork automation can lead to some additional interesting metaphors.
  • Observation: iPad screenshots seem to almost always be in landscape orientation
  • Twitter app for iPad (iOS5) has gesture navigation features that the iPhone app doesn’t have. – Odd inconsistency
  • IKEA Fluid iPad App Concept – http://bit.ly/ikeatouch
  • Random Though: How could a list or card stack design be adjusted to be more fluid and touch focused?
  • Due to its size, the iPad is more prone to dominant hand issues where as the iPhone has less of an issue.
  • Always review a device’s specific User Interface Guidelines when creating apps for platforms.  Still reference such for websites that specifically target those devices to be aware of possible expectations and clashes.
  • Responsive and Adaptive web design is not always the best option for all forms of content. There is no true silver bullet for web design and user testing needs to be considered.
  • Web forms for mobile should be easy via shortcuts, JavaScript, and minimizing typing.
  • Even though people love to do text messaging, doesn’t mean they enjoy going from form field to form field.
  • Random Thought: Wonder how many people use the “Previous/Next” buttons on iOS keyboards when typing in a form.
  • Book Reference – Living with Complexity (By Donald Norman)
  • Interface Conventions are Cultural References
  • Don’t use up front instructions, no one reads them.
  • Interfaces should work naturally (e.g. if you use a book metaphor, people will try to turn the page)
  • iOS5 Contacts and Calendar use a book metaphor and don’t allow page turning.
  • Be careful when mixing design metaphors as the interfaces become more natural.
  • Toddlers are great examples of beta testing touch and natural user interfaces since they don’t have to unlearn years of point and click.  They also learn and try different interactions to get things to work.
  • Games are great examples for teaching users different interface trends (via coaching, leveling up, and powering up)
  • If you coach/guide someone into a gesture – hide the tip after the first or second time to ensure it doesn’t turn into noise.
  • Tip: If something scrolls off screen, animate it scrolling into the default position to help subtly show that it scrolls to the user.
  • Don’t be afraid to explore extremes – Uzu (iPad app) has functions for up to 10 finger gestures!

2012 – A New Year of Progress

As we wind down 2011 and prepare for 2012, it’s hard not to ponder what will be in store for us in the next year when it comes to User Experience and Web Development.  Here are a few things that I foresee happening sometime in 2012.

Mobile Everywhere

Every quarter, we see more and more consumers purchasing Smartphones and Tablets.  We see a huge increase  in mobile traffic and general consumption as well.  We’re also seeing consumer behaviors changing because of these devices.  These are statistics that cannot be ignored by the business world and because of such, websites will begin to become optimized for viewing on these formats.  The holiday season showed a higher year over year purchase rate of mobile commerce; however, it also saw a higher abandon rate which could probably be attributed to a less than optimized shopping experience from the tablet of phone the consumer was using.

More Intuitive, Interactive Site Designs

Due to the growth of mobile and touch devices, some web design principles need to be tweeked a bit. Because of this, I can see a greater need and reliance on usability testing as well as a greater reliance on interfaces that are more intuitive than descriptive.  Furthermore, I can see designers and developers working on adding additional polish to sites by adding subtle animations and effects to provide a more pleasurable experience for the consumer.

Content – Reevaluated

Along with visual and interactive design changes, I can see companies begin to take a more earnest evaluation of the content on their websites.  Content Strategy is a field that really blew up in terms of exposure in 2011 (in my opinion).  With major thought leaders like Kristina Halvorson and others bringing the discussion of Content Strategy to the forefront, companies will take notice and begin to look at what goes on their websites and continually audit the information.

New Interactive Experiences will continue to be Explored

Looking over what new(er) or refined products hit the scene in 2011, the 2 products that probably have the largest, long term impact on Interactive Design probably would be the Kinect and Siri in the iPhone 4S.  I can see people continue to explore and test out new ways of interacting with other products through touchless gestures (Kinect) and voice (Siri).  What could be done on a website if it used the webcam and could be interacted with in ways similar to a Kinect?  Motion-based navigation and a number of other possibilities are all within reach in the very near future and I think 2012 will begin to show up more refined concepts in this area.  Voice on the other hand is currently available but not in as eloquent of a solution as Siri.  I can see a web-based Siri becoming available in some form by the end of 2012 in which voice recognition can be used to fill out forms, navigate a website, and do a number of other things.

I’m sure if I thought for a bit longer, I think that I’d be able to come up with a few more ideas.  But right now, these are the ones that come into my mind and in which I’m most excited about.  Anything is possible when it comes to technology, now it’s time to see how close we can get using today’s tools and techniques to making such a reality.  It’s time to reach just a bit farther than before.

Reflections on Facilitating My Recent Design Workshop

This past weekend, I had the privilege of attending the 8th semi-annual Iowa Code Camp.  During my time up there, I presented a design workshop.  The workshop was the first presented at any Iowa Code Camp and was attended with by a handful of individuals.  While it was a fairly experimental endeavor, all attendees enjoyed it due to the interactivity and the exposure to elements of the design process that usually came well before their work on a project. In terms of how I facilitated the workshop, I assisted in guiding the attendees through the following tasks.

Crash Course Presentation

This presentation was a quick introduction to the exercises that is typical in most workshops.  Having attended Iowa Code Camp multiple times in the past, I made sure to provide as much information as I could since the majority of attendees are developers and not designers.

Establishing Teams and Handing Out the Scenarios

After the presentation, I divided the room into a couple of teams. Once the teams were established, I handed each one of two design scenarios that every attendee could related to. The first scenario was to redesign the conference’s website. The second scenario is a redesign of a fictional job site.

Brainstorming

The first true exercise was in brainstorming certain things with relation to each scenario. Each team was asked to brainstorm 5 audience segments for their scenario first. I wanted to challenge the teams to think beyond the obvious audiences. Similarly, I next asked them to explore and brainstorm at least 5 different contexts in which one or more audience segment may access the site. There was a little confusion on this one since I didn’t thoroughly explain what I meant by the when and how as the definition of context. One example of what I was looking for would the fact that participants of an event would want different information at the event than they would prior to attending at all.

After contexts were identified, I next asked each team to brainstorm a number of features that’d be on the site. This represented the business assumptions of what their customers would want. Lastly, I asked each team to try and brainstorm a moderate amount of possible content elements that’d appear on the site (i.e. A speaker’s bio, a job’s description, etc.). From observations, coming up with ~25 pieces of content was one of the hardest parts of the workshop for both teams.

User Interviews

As I refactor the workshop, I plan to dedicate a lot of time towards this topic. This exercise entailed creating 5-6 talking points or goals in order to get information on while conducting an open-ended interview with a member of the other team, who was role playing a representative of an audience segment. The goal was to simulate a customer interview in a fashion outlined by Indi Young’s Mental Model process. The conversations went fairly well; however, most of the talking points turned into direct questions. While I feel like it was a good exercise, I am definitely reevaluating it in future versions of the workshop.

Card Sorting

Next, I had each team use the content in which they brainstormed in order to do a card sorting exercise. This exercise went well in illustrating the differences in how people sort, label, and justify the placement of the content on the site. Each team sorted their cards themselves and made a mental note of their own labels and sorting. After each team had finished, each team sorted the other’s deck while the other team observed. While card sorting can gain a large amount of benefits when done multiple times to identify trends, even this small sample set of a sort showed everyone the impact it could have.

Prototyping

Sadly, time ran short and we weren’t able to really do any form of prototyping beyond a quick sketching exercise. Had I more time, each person of each team would pick a page of their site and spend 3-5 minutes sketching (quickly) 6 small screen representations of that page. With a short time limit, ideas are raw. After the time expired, each team would review the ideas each time and identify the top 2 ideas. Normally, this discussion could take significantly longer; however, it was very brief in the workshop sadly. After the ideas are agreed upon, 3-5 minutes would be spent sketching those 2 ideas in a bit larger detail. Again, discussion would follow until the 1 idea rises from the last round of sketches. Finally, one last round of sketches is done in order to sketch the 1 agreed upon idea; followed by a final discussion.

Depending on additional changes I make earlier in the workshop’s agenda, I may cut Prototyping completely. Prototyping is an exercise that could easily fill multiple hours and I’ve attended a couple such workshops myself. Being able to work through an idea from concept to a presentable model is definitely a fun exercise.

Overall Reflections

I think overall, it was a good workshop for the context in which it was provided. It is definitely in need of tweaking; however, I will be giving it again in the near future. Conducting a workshop was a lot more enjoyable for myself compared to a lecture based presentation as well due to the interactivity of such. With all that in mind, I’m looking forward to the next Iowa Code Camp that’ll happen in Spring 2012. If you’re in Iowa while it happens, I highly recommend it for any software professional…but I’m bias. 🙂

Honoring One Legacy by Building Another

Today it was announced that Steve Jobs passed away.  While there are a number of mixed opinions of how he did things, no one can argue that he made a difference in this world.  He looked at the world differently and so many people have enjoyed the fruits of his visions either through one of many Apple Products or through the works of Pixar Animation Studios.  Through his works, his vision, and perhaps even his reality distortion field, his legacy will be experienced for decades.

But in this time of reflection, I look around and see so many companies and people paying homage to him via Twitter, Facebook, and any other broadcast channel.  Even the President of the United States made a point of commenting on this event.  I see this amount of collective voice and remembrance and am in awe.  If there ever was a person of recent years with such a bold legacy, it would be Steve’s.

This reminds of of a book I read four years ago that talked about building a legacy and the stages a person goes through to get to that point. In retrospect, the book was off if you compare the legacies that it outlines and that of Steve Jobs.  Based on Steve’s 2005 Stanford University commencement speech, he didn’t seem to be a person that set out to build a legacy in and of itself or setup a foundation.  His legacy was based on his stubborn focus in doing what he loves and refusing to bend to many of norms of the common era.  He paved his own road and produced a legacy as a true biproduct.

Thinking about how he accomplished things and the sheer magnitude of it all, I can’t help but consider how plausible a fraction of such is today.  Because of the innovations that Steve, Apple, and other pioneers of technology have given us, it is easier for us to communicate and execute and build our own visions.  We can materialize our dreams and it’s when we realize we are our biggest restraints are within that anything is possible.

It’s never late to begin building our dreams and visions.  Nothing is written that what we create today won’t reshape the world to the same degree that Steve did.  Now is the time to start building our passions.

Using HTML5 Prefetching to Show Content Faster

Yesterday, Amazon unveiled the updates to the Kindle product line and held within were a few surprises.  One of the largest surprise that I took away was that Amazon created their own Webkit based browser called Amazon Silk for use on the new Amazon Kindle Fire.  As I watched the introductory video, I couldn’t help but focus on the concept of the smart computing cloud of EC2 to pre-cache trending pages/links so the speeds associated with these pages are faster.  While the concept isn’t new, it’s something that many people struggle with in achieving.  Thankfully, the tools are available to replicate the goal of increasing the speed of rendering without the need of EC2.

Analyzing Trends:

An image of Google Analytics' side navigation

Before we can begin to reliably cache targeted pages, we need to know what pages to cache.  This can easily be done using typical search analytic packages such as Google Analytics.  Inside of these packages (Google Analytics will be used as the example), you should be able to locate your top content on the site.  This represents the pages with the most visits over a period of time.  If you use a proxy server to cache the content of your website instead of directly hitting the web server, these are the pages you should be making sure are cached appropriately.

The next thing to pay attention to on this list is how users are getting to these pages and where they are going from such.  If the links are internal, this opens up the possibility of prefetch caching the “next” page onto the client’s system.  Obviously not all things can be cached like this (e.g. steps with in a shopping cart); however, if the users typically click on the “Login” link from your homepage, prefetching this link may provide a better, faster experience.

The last item to focus on in the analytics tool is any form of search analytics you may have.  I’m not talking about SEO analytics but more about internal site searches for when the user just cannot locate the information in the various navigation structure(s) you’ve presented.  If there tends to be a search term used very frequently, this is a possible candidate for caching as well as the page most people click on from search terms.  While such information tends to shine a spotlight on where your navigation may need to adjust; caching the content in anticipation may be a helpful short term solution.  For more information on this type of analysis of your internal search analytics, I highly recommend Louis Rosenfeld’s book Search Analytics for Your Site.

Setting up Prefetch caching:

Assuming you don’t have the ability to setup a proxy server between the web server content and the consuming browser, there are ways to cache the content of your site for the consumers to interact with.  The primary one I want to focus on is the new HTML5 prefetch method.  In the proxy server case, the browser requests the information from a proxy server.  The server checks to see if it already has that information from a previous request, and send the information to the consumer if it does.  While the information may be stale, most content on the web is capable of being cached like this without any impact.

With HTML5 prefetch caching, the cached content is stored on the consuming browser’s device along with typical internet cache or temp files.  How this is different than normal browsing is that prefetch can request a page, image, or other resource while the user is on a different page.  If you have ever went to a web page, left, and then went back to it; the return experience should be a lot faster for you.  This is using the local cache of the page.

In order to enable Html5 prefetch caching, you simply need to add the following line into the <head> tag of the page.

<link rel="prefetch" href="location of page" />

This single line tells the browser to retrieve the specified file while the user is on the current page.  These lines can be dynamically added to the head tag in order to adapt to trends or to address the needs of search term results, as well.  If you want to learn more about HTML5 prefetching, checkout this blog post by Jean-Baptiste Jung.

Summary:

While browsers are getting faster, it is nice to be able to ensure the user experiences the speed of the page they request.  While prefetch caching isn’t identical to all of the optimizations that EC2 does for Amazon Silk, it does provide an alternative in terms of the perceived experience. Review the needs of your audience through the analytical data available and act accordingly.  Caching is just one of many solutions but can provide a great value to your users.

Don’t Half-Ass The Changes You Attempt

Last week, I came across this post by Bruce Tognazzzi over on his AskTog blog in which he talks about ways to justify the use of rough sketches in the design process.  He (and John Murray whom he quotes) points out that qualitative evidence isn’t readily available on such actions and thus can cause a tough sell to companies and clients alike.  He goes on to illustrate behavioral and psychological changes that can be observed (e.g. designers and developers working together more efficiently); however, such cannot easily be measure.

This reminded me of Dr. Spencer Johnson’s book Who Moved My Cheese? in which 4 personifications of human behaviors towards change are portrayed in a fun and simple story.  As a designer and developer, I’ve seen a lot of changes in the industry as well as in any given workplace that I’ve been employed.  Reading Bruce’s post reminded me of the “Haw” persona from Dr. Johnson’s book – a persona who accepts changes over time after he sees something better.  In the instance of attempting to change a business process to include rough sketches, it’s all too common to hit resistance; especially if the status quo is working.  This level of resistance can often lead to compromises where the step is added and is unexpected by the client.  If the client was expecting a fairly-functional prototype and instead received rough sketches or simple wireframes, the experiment will probably be perceived as a failure.

It’s all about setting positions and managing expectations early.  Paul Boag and his team at Headscape echos this sentiment when this produced “Where are My Rounded Corners?” – an excellent piece of content on the web design/development concept of Progressive Enhancement.  We can learn two things by reviewing the document.  First, set expectations and state your position/process early.  If the client knows it’s coming, there’ll be less backlash than if delivered after their own assumptions and expectations have been set.  The second thing is to ensure the content is clear, concise, and appropriate for the context.  The document is focused for the client and speaks in the client’s terms and towards their needs.  This is not always easy but can make a world of difference in any content you produce.

So after reviewing these three documents, the largest thing I can see is that if you are crusading to change something in your organization; don’t half-ass it.  Many times change comes from passionate people and you’re only selling yourself and your position short by only talking about the benefits via a slideshow.  Make an initial case and strive to do a full integration as your test and then review the change from all sides.  If the change directly interfaces with the client; interview the client.  If it interfaces with the developers; talk to them too.  If such goes well; the last important thing to remember is that others should be trained in such since inconsistency can breed Dr. Johnson’s “Hem” mentality.

Don’t half-ass the changes you attempt in anything.  The worst thing that can happen (in the context of changing a business process anyways) is you learn from the experience which is never negative.