My discussion with Seth Odell (@sethodell) about mobile on his show, HigherEd Live (@higheredlive), is now available for your viewing pleasure. We had some technical difficulties before the show so it might not be as polished as some might hope but I had a ton of fun talking with Seth. Blog posts sharing some more stats and my views on a progressive mobile strategy for higher ed (that builds on a previous one) will be coming this week. If there are any other questions I can answer drop a line in the comments below.
If you’re curious about my headphones they are the Sony MDR-V6 Studio Monitor headphones. And the cap is for US Soccer.
This Sunday, January 30th, 2011, at 7pm EST I’ll be talking mobile on Seth Odell’s (@sethodell) web show, HigherEd Live (@HigherEdLive). We’ll be talking about the current state of mobile in higher ed, some strategies you can follow to get going, and some tools you can use. I’ll also be sharing statistics from our fall 2010 semester as well as information that I’ve found from a survey of the sites found in the higher ed mobile directory. While it will be recorded, please join us live so you can ask questions in real-time. I’m also sure Seth will be as high-energy as usual.
And if you’re not completely sold on watching we’re giving away a FREE pass to my Going Mobile webinar from HigherEdExperts in May – a $350 value!
Way back in September 2010 when I attended Design for Mobile my brain was melted by a talk about interaction design given by Itai Vonshak (@vonsh) of elements. It was one of those talks where your worldview just… changes. It’s like when you sort of knew the concept existed but no one had laid it out like that where everything just clicks for you. The main thrust of his talk was this notion of magical moments. He has produced a series of posts based on the topic.
Magical Moments
As defined by Itai, magical moments are those times when you’re interacting with a device where you practically fall in love with whatever you’re using. They can range from subtle design interactions that generate a sub-conscience comfortableness with a product to more functional, in your face interactions where you have an “Aha!” moment when something just works easily. For the former the “bounce” when reaching the end of a list in the iPhone UI is a good example.
The thing about magical moments is that they’re not limited to mobile. Yes, the talk was about mobile but really the concept can be expanded to any product or, frankly, process. As we talk about projects here I keep coming back to “How can we get a magical moment out of this?” Basically what can be done as part of the process or whatever it is that will make people fall in love with our school. Just think of the processes at a school that are clunky. Can any of those be tweaked to find that moment where a faculty member, student, staff member goes “Oh, that made my life easier and they were really thinking of me.”? And I’m not only focused on prospects but also looking at how to retain current students and build relationships that extend to when they become alums.
But how do you identify where you might be able to (easily) implement magical moments?
Paper Cuts
Throughout your day you’ll experience friction. Brief moments of annoyance. We’ll call these paper cuts. Paper cuts are minor but they can cause just enough pain to be noticed and aggravating. Just try typing while you have one on your index finger. The Canonical Design Team defines paper cuts as ”trivially fixable usability bugs.” That’s a little bit technical but you can read that as some part of a product or process is annoying but the issue can be fixed quickly and easily.
While it may be easier, or even more fun, to build magical moments into new products or processes I would encourage schools to look at current processes or products to find the paper cuts that can be turned into magical moments. Identifying paper cuts would probably be best accomplished by either direct observation or, I would prefer, actual use. Until you go through a process it’s sometimes hard to get a grasp on what might not be working and, also by going through the process, if you have inside knowledge it’ll be easier to see how quickly an issue can be fixed (remember, paper cuts are meant to be minor and fixed easily).
Turning Paper Cuts Into Magical Moments
So if you’ve identified some paper cuts how do you make them a magical moment? Itai lists three ways to generate magical moments:
Helpfulness – Be helpful! Everyone enjoys a product or person that gives clear direction and answers questions.
Surprise – To some I think having a product that’s helpful will be enough of a surprise but look for other ways to make the experience more personal. Speed of response can also cause surprise.
Emphasis – Make it clear to the user that you’re offering the helpful advice or providing the personalized information. If it never gets noticed did it really matter?
He sums up these three points as:
The helpfulness creates addiction. The surprise creates affection. The emphasis makes the moment memorable.
As magical moments add up the hope is we can take advantage of a halo effect. Whereby these positive experiences add up and allow the user to perceive other aspects of the school better (like, say, making a donation as an alum!).
Isn’t This Just Customer Service By a Different Name?
Yup. In the same way that, I feel, a lot of the power of social media is in it acting as a very personal customer service tool that by focusing on these magical moments, and especially in converting paper cuts, they will act similarly. Don’t underestimate the importance of customer service and it’s effect on the experience you’re trying to portray at your school.
So a quick round-up of some interesting articles and tools I’ve seen recently.
The Chronicle of Higher Ed: As the Web Goes Mobile, Colleges Fail to Keep Up
This article from The Chronicle of Higher Ed, As the Web Goes Mobile, Colleges Fail to Keep Up, has been making the rounds today on Twitter. My initial reaction to the story was that it was very negative. On re-reading it maybe the author did a good job capturing what’s currently the norm in higher education. Obviously, I think there’s cause for a bit of hope and I’m definitely excited about what’s possible for higher ed in this space. The one thing that really struck me is that “mobile” can mean so much. To me it’s about delivering central services like a calendar and campus map. To one commenter they’re really focused on the academics and yet another commenter is focused on it’s use for marketing. No wonder colleges are “failing” when there’s such a diverse set of goals to achieve! Suffice it to say, there’s a lot of space for us to evolve and their’s nothing wrong starting small. Another, older article that’s in a similar vein to this one is Websites Gone Mobile by Karine Joly (@karinejoly).
Edupunk goes mobile: Mobile library sites with zero budget
One area (see, lots to do in higher ed!) that I’m interested in is how mobile usage picks up with respect to libraries. At West Virginia University our libraries department has their own mobile website (I wasn’t involved at all). The article ”Edupunk goes mobile: Mobile library sites with zero budget” does a nice job covering the current state of mobile in libraries and some of the issues they face. It also offers some solutions. I’m not sure how well they’ll work because I don’t think they tie directly back into real use cases (e.g. mobile front-end for the the catalog) but they’re good things to keep in mind. As much as I sometimes struggle with it third parties offer some really interesting tools to get up and running quickly.
tinySrc: Quick Way to Re-size Images for Mobile
Speaking of quality third party tools, if you have a need to resize images based on requesting device you should think about checking out tinySrc. It’s free and works auto-magically. Basically, in your image tag being served to a mobile device you include tinySrc as the source for the image and reference the final image you want resized. For example:
Then, based on the requesting device the image will be modified accordingly. If you want to push out mobile-friendly images with your press releases this might be a good way of accomplishing that.
Presentation: Mobile UX Essentials
This is definitely one presentation you should check out if you’re into designing mobile interfaces. It was given by Rachel Hinman (@hinman) recently and it absolutely rocks.
WVU University Relations/Web takes CASE honors for mobile website
I do have to take a moment to brag a little bit. Recently WVU Mobile Web, which I work on, was recognized by the Council for Advancement and Support of Education (CASE) District II by receiving the 2011 Accolades gold award for Best Practices in Communications. The article from wvutoday does a good job of giving background on the site and award.
When I chose jQTouch for the WebKit templates in Mobile Web OSP I gained some interesting look & feel functionality. Unfortunately, I gave up a very important feature, deep linking. Basically I killed one of the best features of mobile web compared to native apps. That is to say, I killed the ability to actually use the web as it was intended which is to link from any one bit of content to any other directly. It was the price I paid for a “cool framework that looked native.”
In testing the new location functionality for the campus map module I grew increasingly frustrated with this state of affairs. Every tweak I made to the map detail template required me to: reload the app, click the map icon, select “favorites”, select a building, and then load the map. It’d be so much easier if I could just hit freaking reload! So that’s what I set out to fix.
What I’ve Tweaked in Mobile Web OSP to Allow Deep Linking
First off, the fix to this situation doesn’t really affect jQTouch so if you’re curious about how to implement this in your jQTouch app you’re out of luck. The beauty of Mobile Web OSP is that every page is dynamically created. This means that I can pass variables around and modify templates on the fly. Second, all this passing around of vars gets ugly… fast.
To view a diff of all of the changes that went into this fix check out the commits on GitHub. But the basics of what’s happening are below:
Every request is checked to see if a) it’s coming from a WebKit device and b) if it has the request variable ir (aka internal request)
if it’s from a WebKit device and has the request variable ir then Mobile Web OSP handles the request normally
if it’s missing the request variable ir then that’s where things get interesting…
The request is then redirected to the index page (code) where:
the general header with all the necessary elements for jQTouch and the rest of the system are loaded
behind-the-scenes a request with the request variable ir is made to get the contents of the initially requested page. a second variable dl (aka direct link) is included so that the toolbar is modified to show a link to home instead of the normal back button.
the general footer is loaded
At this point everything should work normally
Eyes glazed over yet?
Caveats & Notes
If you’re implementing this in a similar system to Mobile Web OSP there are a couple of gotchas:
The biggest gotcha is if you need anything dynamically loaded on page/panel load. For example, in the campus map module I use jQTouch’s pageAnimationStart callback on the map detail div to initialize and load Google Maps. Well, if you deep link to the map detail the pageAnimation never runs and no map loads. I addressed this issue by including a document.ready call in the map detail div to load the map when it’s directly requested. This also affected the favorites check in Calendar and People.
There is one small tweak to jQTouch to include the request variable ir on each GET request.
For form fields I also included the request variable ir as a hidden input. I’m not sure it’s really needed but better safe than sorry.
At the moment this only handles a link back to the main home page instead of the section in which the detail may be from (e.g. a link to the map detail will have a link back to home instead of map). Hopefully I can address this at some point. Something is better than nothing though.
Conclusion
Deep link support opens a lot of options for developers. Now I can feel much more comfortable including a “share” feature that I know will work across all the templates. When pushing requests from external sources like our main calendar I can now directly target the calendar module. But the best part should be that it reduces user confusion and frustration. It should definitely reduce developer frustration when testing new features
Addendum: Scope Creep Also Sucks
I’m definitely suffering from scope creep on this latest release. Originally it was going to be a 2.1 release with some bug fixes, then a 2.5 releases with some decent new features and now I think I’m getting close a full point (3.0) release with all the big changes I’ve made. The CHANGELOG is getting seriously long. Unfortunately, as I come across “itches” in the system I can’t seem to stop from itching them. Hopefully all the changes make a better product in the future and no one is waiting on me too long.
I swear a non-Mobile Web OSP blog post will show up here shortly. I have some interesting things related to statistics in the works. Thanks for bearing with me…