What internet users should expect with the rise of HTML5

There has been a lot of controversy and information about what the increasing presence of HTML5 will represent for web developers and their current way of dealing with web projects. It has also been acknowledged as a very positive improvement for numerous reasons concerning said subject.

From the user’s perspective, though, there is also a lot that can be mentioned about what the implementation of the HTML5 markup will do to the way everyone’s used to interacting with the web. The following facts explain what current users should expect of these changes.

HTML5 logo

No more plug-ins needed

What has been regarded as the best advantage brought by the implementation of HTML5 is the eradication of video and audio plug-ins with the introduction of markup elements to replace them. This means that, as HTML5 becomes stronger, users will no longer be stopped by inconveniences such as the need to install Quicktime, Flash Player or Silverlight to view this type of content.

Contrary to the popular belief, though, HTML 5 does not totally eliminate the reason of existence for these software packages. It makes them unnecessary for the online content viewing, but there are still other appliances they can be used for. The biggest controversy had been the supposed battle between HTML5 and Flash, but there’s hardly a battle when the reality is just a rearrangement of the roles they play. Flash still has its good points, which sadly won’t reach all of the mobile audience as expected.

Shorter loading times

Since there will no longer be a need for third-party processes to load online graphics (not only video or audio, but images and interactive elements as well), users will be able to view web pages a lot faster than before. This fact will hold greater possibilities for graphics and interactions inside each page, also considering the fact that no plug-ins will stand in the way as was previously mentioned.

Less cross-browser viewing problems (in time…)

HTML5 will bring web standards to a whole new level, making it easier to overcome cross-browser differences, meaning that it won’t matter what the browser of preference is, content will be displayed the same way always.

This is still not entirely true, however, as Internet Explorer (up until version 8) is still incapable of correctly displaying HTML5 elements. Nevertheless, there are currently some existing coding projects looking to overcome this problem, which makes HTML5’s positive future a lot brighter and closer.

An increase on mobile compatibility

Going back to the plug-in situation discussion, being able to stop depending on plug-ins also means being able to reach mobile devices a lot easier. Internet users will easily visualize everything from their mobile devices in the near future (even if the device of their preference turns out to be an Apple device), without worrying about the appearance of disturbing icons like the infamous question mark in a blue cube.

With the help of HTML5, web applications and games that can be now built with its new features will no longer be unavailable on mobile devices, bringing a whole new level of online interaction to the hands of mobile internet users.

To sum up

The mayor goal of building a web site, tool or application is reaching as many users as possible once it’s been completed and released. If all goes well, HTML5 will help us accomplish this in a near future, eliminating barriers that currently keep users from interacting with web content the way they would like to.

Working ads into your mobile design

Yes, everyone hates ads on their apps. We hate ads everywhere. But when it comes down to sponsorship interests, we as designers have to live with these ads whether we like it or not. So what to do, then?

First things first: Consider regulations and standards.
The standard sizes for web ads are very popular, but did you know there are standards for mobile, too? You should check out the guidelines provided by the Mobile Marketing Association and get updated on the subject.
Not only does it provide complete explanations, it also provides sizes and samples of all the available ad standards, including character counts for text ads.
Positioning: Avoid tap mistakes!
I am an avid user of deviantArt. But their mobile web version used to always make me click on the ads by mistake while I was trying to edit my messages.
 
They changed that, though, and I’m grateful for it. Now, instead of taking you directly to the ad, clicking on it overlays a button that says ‘Go to ad’, so you have to click on it twice for you to be taken out and redirected to the sponsor’s web page.
I would rather place the ads over the menu, though, or not as close to it (some padding would help).
Last week, during the Seattle stop of the Web App Masters Tour, Luke Wroblewski said something about this, quoting data from Harris Interactive:

47% of mobile users tap on ads by mistake

You may also want to read the MMA guidelines on this regard, since they mention creative design considerations for ad placement.

 
 
Alternatives: Whole-page advertising
 
Maybe it’s not an option on mobile web, but what about native apps? I’ve seen this done and, even if it’s a larger display, sometimes it makes it far more elegant and discreet.
When the app is loaded, for example ElNorte.com‘s mobile app for iPhone (a regional newspaper), the app displays a whole-page advertisement, entirely designed to suite the sponsor’s requirements, which then elegantly flips back to the app. This is presented while the next stage of the app is done loading.
So what’s your take on mobile advertising? I’m still testing the best solutions myself, so I might let you know of new discoveries along the way.

My Notes on Jared Spool’s presentation – The Essential Principles behind Great Design Principles

As a perfect end to this fabulous event, our host Jared Spool talked about the essentials behind the design principles we apply to our individual projects. I personally really liked it, I think it was a great way to wrap up.

Here are my notes on it:

  • We need to provide clear copy explaining any hardware problems that may have occurred to avoid the user further trouble.
  • Design principles established by Dieter Rams.
  • Innovation isn’t saying yes to a hundred things, it’s saying no to a thousand things – Steve Jobs.
  • Speaking about how IBM’s design principles fail to be actually useful as reference, and how Windows’s design principles have turned out to be quite effective.
    • The success is based on the focus of their principles – How do we tell if our designs are getting better.
  • Field research should involve everyone on the team, not at the same time. Everyone can learn how to do field research and teach how to do it.
  • First you should let the stakeholders present the top priority projects.
  • After this comes the creation of personas for the project.
  • Personas are fake because they combine characteristics of different real like users.
  • Scenarios are created after personas and their individual common goals.
  • Looking at personas and scenarios, principles can be summarized.
  • Using principles to explore design – Creation of mini briefs
    • Project statement – design goal
    • Select personas – who is the design directed to?
    • Select scenarios – what the design will have to do
    • Select principles – what will tell you you’re doing well
  • Using principles to critique design – critique is a two-way process:
    • What you’re trying to accomplish
    • How you’ve chosen to accomplish it

And that was it! Hope my notes were useful to everyone! And now I’m back to reality and back at the office on Thursday (because it’s going to take me all of tomorrow to get back home), but I’ll keep updating with the relevant news of mobile field as frequently as humanly possible.

My Notes on Mike Lee’s presentation – Designing a Strategy for Organizational Transformations

Almost at the end of the event and it was Mike Lee‘s turn to illustrate us on the internal strategy of AARP towards going mobile. Overall very interesting data, although I didn’t really know how to write it down, and I’m sorry about that because he had a lot of interesting insights to share. I think my notes don’t do him justice.

Nevertheless, here they are:

  • Drive traffic in with SEO, media and other publications
  • Push content out through social sharing and cross platform presence.
  • Channel integration can get really messy, with a lot of patching along the way as the number of platforms increases.
  • People at AARP have a limited US audience, so that limited their adaptation needs.
  • Their current use of SMS is limited to tactical purposes.
  • Currently working with a small mobile team and an external vendor.
  • Didn’t wait on mobile because of how slow things tend to move anyway inside a huge organization.
  • Established an arrangement of teams in order to cover their users’ experiences and the needs generated by them.
  • They use web site components such as JSON calls for news feeds and members login.
  • The applied APIs include Twitter, Facebook and Bit.ly
  • A marketing strategy was to create a trivia challenge, which was promoted through mobile articles and increased traffic to the main site.
  • Created a digital member card for login members.
  • AARP has launched both Android and iPhone applications.
  • They’ve encountered barriers with senior users.
  • Thinking about the multiple devices available and their increase of use.

My Notes on Luke Wroblewski’s presentation – Designing Mobile Web Experiences

So we’re almost done with the Web App Masters Tour, just two more presentations to go, and I don’t want to sound biased when I’m saying this but Luke’s was, to me and because of my current focus, positively the best presentation up to now. I was so excited to listen to all this immediately appliable stuff!

Thanks to Luke Wroblewski again for sharing all that information. It was also very nice meeting him on a more personal leve, he is a great guy.

Here are my notes on his talk:

  • Use of PCs decreased 20% most likely because of smartphones and tablets.
  • Sign-ups on mobile are important! 16% of Twitter sign-ups are via mobile.
  • A mayor use of Facebook and Twitter is done through the mobile website
  • Consider mobile capabilities like location detection
  • Start using new coding technologies
  • Embrace mobile constraints like limit of space and variation on signal availability
  • Mobile use cases
    • Lookup/Find
    • Explore/Play
    • Check In/Status
    • Edit/Create
  • In mobile, you should design navigation first, content second
  • Keep navigation minimal, give content all the attention on the screen
  • Every time you assume somebody is not going to do something on mobile, they do.
  • Don’t dumb stuff down for mobile
  • Navigation elements – Should be kept to a minimum and maintained in the simplest form possible. Sometimes the best solution is as simple as an anchor link.
    • Avoid fixed navigations on web, there’s no right way to do it: You have to sacrifice performance and it’s really hard to accomplish.
    • Avoid back buttons, they’re always already someplace else and will end up confusing users.
  • We generally have partial-attention users, and partial attention requires focused design.
  • Have clarity and focus on the really important elements of your content.
  • Care about touch-based interactions – even BlackBerry and Nokia are heading there now.
  • The recommended minimum size of touch targets is 44 pixels.
  • No hover menus on mobile
    • Are these elements important enough? Put them on screen
    • Require an on tap action
    • Bring them out on swipe
    • Make it a separate screen
    • Or just drop it!
  • Hover CSS covers devices with indirect manipulation.
  • Set a viewport to create a better experience.
  • Try not to use images, take advantage of CSS3.
  • Think in terms of fluid layouts: Your users can flip their device and your layout must adapt to this change.
  • Reduce your elements; it makes things simpler for everyone on your team.

My Notes on Kate Bringham’s presentation – PatientsLikeMe: Adventures with Data Visualizations

Kate’s presentation was a very interesting specialized topic. It was very interesting to see how they handle health data, mainly because I really had never thought about health data handling at all. It’s very delicate and complex data and I really liked how people at PatientsLikeMe are doing things.

Here are my notes:

  • Eight out of ten users look for health information on the internet
  • The goal at PatientsLikeMe is to make people know what they can do about their state and how.
  • It’s important to make it easy for people to create data
    • Easy to answer questions with no jargon
    • You can’t always make it extra simple, but you don’t always have to ask too much information.
    • Let people use their own meaningful language
  • Highlight the benefits of sharing data – Let users know what they do on the site is worthwhile.
    • For every piece of data that is asked, something can be given to the user in return. (example: answer the ‘I have’ question to find patients with your condition).
    • Patients can see themselves in context and find out the degree to which their symptoms are common.
  • Help people use data to answer their questions
    • PatientsLikeMe helps people know the outcomes of different actions they can take regarding their state.
    • People can learn through the experiences of other people.
    • People can end up answering questions they never really thought to ask in the first place.
  • Don’t be afraid to experiment
    • Be willing to fail while trying stuff you’re not sure about.

My Notes on Steve Portigal’s presentation – Design Fieldwork: Uncovering Innovation from the Outside In

I really liked Steve Portigal‘s presentation, it was a ver insightful description of how fieldwork should be handled and considered.

I also remembered some of the procedures of my previous job and I was actually very surprised to find out how much of it we had been doing wrong. Can’t really change that now, since I’ve got a different job at a different company, but it was still really interesting for me to know that.

Here are my notes:

  • Use more than one method; integrate them for your general process.
  • You don’t get the same kind of knowledge from a market study graph than from actually observing users, but you can use both of the results.
  • Innovating goes farther than just solving existing problems.
  • Satisficing refers to acceptance of good-enough solutions.
  • The knowledge “You’re not your user” creates empathy, but going out to the field makes you listen and understand what your users are going through.
  • Through fieldwork you can detect unmet business goals.
  • Doing fieldwork can accomplish many research goals at the same time, not only about the users but also about your organizational goals.
  • Web analytics is never as descriptive as actual fieldwork
  • Fieldwork should be used through the usual development cycle.
    • At the beginning, to find out what you should do, what users need.
    • In the middle, to make sure you’re doing the right thing
    • Afterwards, to find innovation opportunities
  • It’s important to have the knowledge of what you currently know and what you want to learn through your research.
  • Plan and execute your research.
    • Who to talk to? Recruiting users for the study, creating contrast to reveal key influencing factors.
      • Consider the many existing types of users.
      • Considering demographics is secondary
    • What to do with them? Selecting methods to obtain the information you need through your study.
      • Don’t directly ask people what they want, engage them in activities like participatory design or role-playing.
      • Create a document to guide your session, even if you’re not going to follow it exactly.
    • Fieldwork
    • Do something with the data – analysis techniques
      • Avoid jumping to conclusions
      • There must be a clear distinction between your interpretation and what the user actually said. Both are important.

On a related subject, and for the spanish speaking audience, I recently published an article on the Software Guru magazine about defining persona profiles that could be helpful when executing the first part of your research (selecting your users). It’s a printed article, but you can also view it digitally.

If you’re interested in knowing more about the Web App Masters Tour this year, Luke Wroblewski has been publishing his notes too and they are much more detailed than mine. You should check them out.

My Notes on Julie Zhuo’s presentation – Data-Informed Vs Data-Driven Design

Facebook has to be one of the most interesting applied examples that can be presented because of the hug number of users it currently has.

I had the opportunity of listening to Mark Trammell talk about Twitter on last year’s Web App Masters Tour at Philadelphia, and now I was able to listen to Julie Zhuo talk about Facebook.

Here are my notes on what she had to say:

  • Data helps us understand how products are used and how they can be improved
  • Photo uploading had been outsourced and the code was a mess. It wasn’t reliable and it was poorly designed.
  • Facebook redesigned a very cool experience of photo uploading but it wasn’t that accessible for users because of the need to download a plugin – Only 34% of the users tested were successful
  • Change to a more native feel, with a simple workflow, increases 11% of success rate.
  • Data can be used to sanity check changes to a product
    • The composer example – changes in the main status update process in an attempt to increase sharing.
  • Qualitative data also has a value in these tasks, but it’s mainly for understanding how users feel.
  • You can spot specific use cases that are common with the interaction between your users and the product
    • New moms are a very intense use case amongst Facebook users.
    • Enterprises that want social media presence are also very active users. Not only big companies with social media departments, but also small companies with lesser knowledge of it.
  • Growth of Facebook users – Process fragmentation can improve the experience
    • Sign-up process fragmentation brought a 3% increase in sign-ups (which is equivalent to 9 million more users a year, the size of the population of Sweden).
  • Deactivation process – Giving it the feeling that your friends on Facebook will miss you reduced the deactivations by 7%, which is equivalent to 1 million users a year.
  • Facebook created a team focused on user engagement.
  • Reads and writes were the first statistics considered, but 85% of them are generated by the 20% of the users, which rendered them not as useful as defining data.
  • They believe real innovation invariably involves disruption – The news feed addition was hated at first, but it was related to their aversion to change.
  • With such a stratospherically big amount of users, changes to the product can’t just go live without previously recollected and solid data.
  • The greatest mistake, for them and for everyone, is taking no risks.

She also talked about how they considered the Dislike button but decided it was a risk not worth taking since you could better express that ‘dislike’ through comments and it was more appropriate way to do it. I found that interesting, since a lot (and that’s A LOT) of people have wondered about it in the past.

My Notes on Noah Iliinsky’s presentation – The Steps to Beautiful Visualizations

It surprised me that there was a talk such as Noah’s embedded in the program since it takes considerations back to a conceptual phase purely, and I personally really liked it. He basically went into detail with the premise “What’s obvious isn’t always that obvious bu it should be” and “People tend to complicate things that are normally very simple”.

My notes on his talk:

  • Concepts
    • Visualization for analysis vs presentation
    • Analysis – You don’t have enough data yet, no story to tell
    • Presentation – You have the story to tell
    • A data visualization vs infographics – Infographics can’t be automatically generated and don’t have all the numeric data, but they can have rich content.
    • Education vs persuasion – educational information is just presented to inform and doesn’t look to push people towards a certain point of view.
    • Complexity is the number of information axes represented
  • Qualitative relationships are hard because of the fewer conventions than with quantitative relationships.
  • Make good choices – Intentional over arbitrary choices
    • Understand your goals and their needs
    • Choose what to include, where and how
  • If you can’t concisely articulate your goal, you’re doing it wrong!! (“We’re going to be the market leader” isn’t concise!)
  • Different goals require different methods.
  • Understand your customers, ‘cause your success is defined by their success
  • Consider the meaning of the elements in your design. Does your audience already associate them with something else?
  • What to include – four types of content
    • Data
    • Redundant coding
    • Decoration
    • Noise
  • Where to put it
    • People ascribe meaning to location
    • Relative and absolute placement matters
  • Use a format that fits the data
  • Patterns are really important for exposing meaning. Be careful when using them because, even if they are not intended, they will be interpreted.
  • Things that are the same should look the same and things that are different should look different! It’s simple! So why not?
  • Pick appropriate encodings – Consistent, highly differentiable encodings

My Notes on Josh Clark’s presentation – Mobile Apps: Native or Web Based?

It was a very interesting lunch, meeting new people and talking personally with Luke Wroblewski, who I’ve admired a great deal since I met him last year in Philadelphia. And now it was the turn of Josh Clark.

I gotta say I enjoyed his presentation in quite a special way because of his way of approaching the topic. He captured my attention entirely. I’ve been following him on Twitter for a while now, it was nice meeting him in person and listening to what he had to say up close.

I enjoyed talking to him personally and I appreciated him for answering my questions.

Here are my notes on his talk:

  • One can think about mobile platforms as cultures, and the existence of many of them creates challenges.
  • BlackBerry – 40% of global enterprise
    • Higher texting activity than any other device
    • Low browsing activity – Browsing on a BlackBerry sucks
  • iPhone – High levels of activities
    • Higher activity than other devices even though it has a lesser share of the market.
    • It brought technology to the masses.
  • Android – It’s the technology from geeks to geeks
  • Windows Mobile – Classy, urban and modern
  • There is no single culture, each platform user has different needs and goals.
  • If you don’t know what it’s like to live with a phone, how can you be an expert designing natively for it?
  • You can’t be an expert on all of them.
  • It’s a split decision on platform choice – There’s not a definite winner
  • But only 30% of phone users have apps on their phones.
  • Think small – consider SMS text apps
  • Less is often more. Or maybe just enough is more.
  • Everyone loves web
    • You’re in complete control in what comes to distribution
    • You don’t have to build separate apps for each phone
    • There’s more ubiquity in building for mobile web than for normal web.
    • On mobile you can actually use HTML5 and CSS3
  • The current culture – You think apps are for doing and web is for reference.
  • Web’s weaknesses
    • Can’t match native apps in experience possibilities or speed.
    • Not easy matching great expectations
    • Heavyweight libraries
    • Clunky graphic tools and not enough hardware
    • In the end, web bows to apps
  • Then again, web is available for everyone, unlike any native app.
  • Your website has got to look great on mobile now.
  • Native apps win in payment and findability issues.
  • Web makes it easier to share data to other users, though.
  • Battle of the back office – it’s easier and inexpensive to start building web apps, and testing comes in easier too.
  • Consider your audience – what’s the best choice considering them?
  • There’s not really a fight, it’s a business consideration.
  • The goal is the same – create a good experience for your users
  • You need to have both!
  • Still, we should keep a consistency and have the same core content across all apps.
  • There’s stuff that shouldn’t be on the desktop version either. There shouldn’t be a normal and a light version; the content should be the same.
  • A small screen doesn’t mean the user wants to do less.
  • Mobile mindsets
    • Microtasking – Means you should prioritize some content, but not necessarily strip out the rest.
    • Local – Not only about GPS, but all the other sorts of inputs you can give through your mobile. The goal is NOT to remove complexity, don’t over-simplify. There’s a different between complexity and complication.
    • Bored – Users with a long span of attention.
  • The winning approach is to think about the interfaces as a spectrum of apps that generate a single satisfactory experience.
  • There’s no desktop strategy, mobile strategy… there’s just a plain strategy.