Blog

Bleeding Edge of the Web: How Mobile is Transforming the Desktop UX

June 1st, 2011

Application Development, Interaction Design, Technical, Technology, UI Design, User Experience Design, Visual Design, Web Development

Where is the web going? If I told you I knew, I’d be lying. The web changes so fast, it’s hard to predict where or even what it will be a few years from now. Which is great. The web should be an ever changing ocean of ideas and innovation. Sometimes as developers, we tend to complain about old browsers or people without JavaScript, and forget to think about how far we’ve come.  So, with that in mind,  I thought I’d take a moment to go over some of the really cool stuff we’ll be seeing a lot more of on the web in the coming months and years.

Better Typography and Custom Fonts

With the rise of CSS3 comes greater support for font formats. Why? Well, when @font-face was proposed in CSS2, it had already had Internet Explorer support since version 5, but that old IE relied on the Embedded Open Type (.eot) format. With the release of Safari 3.1, Firefox 3.5, Chrome 3, and IE 9, website designers were gifted a whole new palette to work with. The use of web fonts is increasing at a rapid pace through formats like WOFF and services such as Typekit and Google Web Font API. This not only gives designers more to work with, it also allows developers to control the text better, arguably one of the most important aspects of your site.  It also helps us to not rely on images or Flash sIFR implementations, which may not play nicely with search engines, helping us to avoid possible SEO problems.

Gesture-Based Input and Navigation

Building interactive JavaScript experiences  is definitely one of the more exciting aspects of being a creative developer today. With so many devices now supporting touch functionality and end-users learning how to interact in this new space, designers and developers can create unique experiences that translate well from the desktop, to the phone, to the tablet (and back again!). We can also create more intuitive experiences because, as we’re all learning,  it’s a lot easier to swipe a content rotator on the iPhone than click a next or previous arrow. As designers and developers continue to redefine the UX with a more meaningful interaction, we will get more immersive and, most importantly, enjoyable experiences on the web.

Generally speaking, most desktop experiences will not involve your finger on your monitor (unless you’re cool enough to have a touchscreen pc), but there are some situations where a user can navigate with a mouse as intutively as a finger if the proper cues and UI hints are given. Swiping and dragging gestures are some of the actions we should begin to see a lot more in applications (I mean websites).

I am fortunate enough to work with some of the best, most forward-thinking creative minds in the industry here at Navigation Arts, who give me the opportunity to build truly innovative experiences. Web design will not change overnight, but it will change, and the designers who fail to take touch devices into consideration will miss out on a huge opportunity that is rocketing skywards with the proliferation of smartphones like the iPhone and Android. Gesture-based navigation and input is coming whether you want it to or not, and you should embrace it as a progressive enhancement that can take your site to the next level and give you the chance to grow as a developer or designer. Don’t even get me going about the possibilities for the web as we know it when you bring in something like SixthSense. Truly limitless and mind blowing. Imagine being able to point to something and tweetpic it? (Well, at least all the geeks are inspired). Check out a brief intro of how Windows 8 will utilize gesture-based navigation in its web apps through JavaScript and HTML5. Also make sure to check out my co-worker Toral’s great piece on the new PaperPhone.

Larger Target Areas with More Icon-Based Navigation

This is pretty much a given. We all have fat fingers from time to time and touch devices need larger clickable areas that are easy for finger taps. As the line between app and website continues to blur more and more every day (Facebook, anyone?), icon-based navigation is becoming increasingly  important when real estate for content is limited. We are also now able to click square target areas with our fingers rather than a thin strip of text, so icons help to balance out the mobile realm, increasing user friendliness.

Fluid/Flexible Websites

When companies cannot afford to deliver device-based experiences, they still develop websites that are mobile-optimized so that they have a mobile presence. This shouldn’t be overlooked, as mobile users represent an ever-increasing, generally loyal percentage of the market.

Most touchscreen devices adapt the screen orientation to match the way the user is holding it, allowing the user two types of experiences, generally speaking: the first, a more “on-the-go” portrait mode, and the second a  more relaxed landscape mode. Many sites are now not only offering a different experience for mobile devices, they are even offering different experiences based on the orientation. This tends to be the case for content heavy sites, or sites with video. Many websites will cater to this fairly well since they are usually close to a portrait layout, and just have a higher fold line when in landscape mode. A better UX will lead to more conversions, enabled by different layouts depending on how the app or site is being viewed by the user.

For designers and developers, this means more UI hints, CSS, and JavaScript to define the different layouts. It also signifies much more UX and usability thinking in the planning and wire-framing stages of web development, as well as more time for design and development.

So What’s Next?

Much more HTML5 and CSS3. Less flash. Better experiences tailored for the user, the device, and the situation. More Tron-minded designers and developers who find themselves saying, “I Fight for the User!”

HTML5 is going to play a huge role in enabling web developers to do a lot more with pure web apps and, in some cases, build native apps from web apps (PhoneGap). With HTML5 and CSS3, designers and developers are being given an endless box of legos of whatever we want. So, go build something cool. If you can visualize it, you probably can do it…and no Nike slogan here. I like “Just Done It” a little more.