Operation Mobile

Posts about UX

Mobile Intel: Tablets and smartphones – so what’s the big deal?

January 30 2012

Mel Findlater gave an excellent talk today for the Cambridge Usability Group about how tablets in particular can change lives.

Mel Findlater

She started by giving an insight into how tablets have transformed the lives of people with disabilities by helping them communicate, interact and learn.

By using a mainstream rather than a specialist device they felt more confident allowing them to break down barriers and build relationships which otherwise would have been difficult to do.

Mel also talked about the role tablets played in ‘keeping dementia at bay’ and played a video of an elderly gentleman talking about how an iPad gave him opportunities to do challenging tasks and activities.

It’s very rare to attend a presentation were so many of the audience wanted to share their experiences and ideas, which goes some way to tell you how good a job Mel did.

Mel mentioned she’s trying to put together an event for developing apps for older and disabled users so if you’re interested let her know.

There’s also a Official RNIB Accessibility Hackathon taking place on Saturday 11th Febuary 2012 in London, so if you’re interested developing apps with accessibility in mind make sure you sign up!

jQuery Mobile UX: Add a back to top button

January 24 2012

In this post we’ll see how you can improve the user experience (UX) of your jQuery Mobile apps by adding a back to top button.

back top to demo on the iPhone

You can check out a demo of the back to top button here.

Just remember to resize your browser window so you have to scroll!

How does it improve the UX of your jQuery Mobile app?

No doubt you’ve been to a page on your mobile device where the only way to get back to the top of the page is to continuously keep swiping?

Using the jQuery Mobile scrollstart and scrollstop events we can show a back to top button whenever the user has scrolled to a position which is greater of their browsers viewport as shown in the mock up below.

back to top mock up

How to create the back to top button

The first step is to add a button element to the body and bind a click event to it.

$('body').append('<a href="" id="backToTop" data-role="button" data-icon="arrow-u" data-theme="b">Back to top</a>');
$('#backToTop').click(backToTop.click);

The click event is handled by a function which scrolls to the top of the document body element.

While we could use the jQuery Mobile silentScroll function to scroll to the top of the page, the animate function gives a nice smooth scroll.

click: function () {
    backToTop.hideBackToTopButton();
    $('html, body').animate({scrollTop: 0}, 800);
}

As we are dynamically adding an element to a jQuery Mobile page we need to call the trigger function.

$('body').trigger('create');

Next we bind the scrollstart event to a function to hide the button.

$(window).on('scrollstart', backToTop.scrollStart);

scrollStart: function () {
    $('#backToTop').hide();
}

The scrollstop event is bound to a function that checks if the Y offset is greater than the height of browsers’ viewport.

Fading the button is much smoother than just showing it.

$(window).on('scrollstop', backToTop.scrollStop);

scrollStop: function () {
    var windowHeight = $(window).height();
    if (window.pageYOffset > windowHeight) {
        $('#backToTop').fadeIn('slow');
    }
}

The final step is to hook up the code for the back to top button to the page.

$('#backToTopDemoPage').live('pageinit', function (event, ui) {
    backToTop.init();
});

For more about jQuery Mobile events check out the docs.

Styling the jQuery Mobile button

As jQuery Mobile has excellent theming support you can use a data theme HTML5 attribute to style the button.

The location of the button can be changed using CSS styles.

For example to show the button in the top left corner use the CSS

top: 0px;
left: 0px;

to show the button in the botton right corner set the CSS as below:

bottom: 0px;
right: 0px;

or a combination of both.

The complete code listing is shown below.

<!DOCTYPE html>
<html>
<head>
    <title>Back to top demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>    
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <script type="text/javascript">
        var backToTop = {
            init: function () {
                $('html, body').append('<a href="" id="backToTop" data-role="button" data-icon="arrow-u" data-theme="b">Back to top</a>');
                $('#backToTop').click(backToTop.click);
                $(window).bind('scrollstart', backToTop.scrollStart);
                $(window).bind('scrollstop', backToTop.scrollStop);
                $('body').trigger('create');
            },
            click: function () {
                $('html, body').animate({scrollTop: 0}, 800);
            },
            scrollStart: function () {
                $('#backToTop').hide();
            },
            scrollStop: function () {
                var windowHeight = $(window).height();
                if (window.pageYOffset > windowHeight) {
                    $('#backToTop').fadeIn('slow');
                }
            }
        };

        $('#backToTopDemoPage').live('pageinit', function (event, ui) {
            backToTop.init();
        });
    </script>
    <style type="text/css">
        #backToTop {
            position: fixed;
            top: 0px;
            left: 0px;
            display: none;
        }
    </style>
</head>
<body>
    <div data-role="page" id="backToTopDemoPage" data-theme="d">
        <div data-role="content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</body>
</html>

In the next post we’ll be looking at how to creating a back to top jQuery Mobile plugin.

Mobile UX Tips – Don’t make users delete text in input fields

September 16 2011

Ever had to delete text in an input field before you can type in what you want to enter?

It’s a pain if you’re using a desktop browser but on a mobile or tablet browser it’s complete UX fail.

The good news is it’s an easy problem to solve.

If you’re a modern browser it probably supports the HTML5 placeholder attribute.

This allows you to show helpful text in the input field which disappears when the user focuses on it.

The HTML markup below shows how to use the placeholder attribute

<form>
    <input name="q" id="q" placeholder="Enter product name or number">
    <input type="submit" value="Search">
</form>

If your browser supports it, the text in the input field should disappear when you click or tab onto it.

So what happens if a browser doesn’t support HTML5 placeholders?

The user would just see an empty text input field (try opening this page in Internet Explorer for an example).

But this isn’t what we want.

Having text in the input field is helpful because it can help the user to understand what they can enter.

One possible workaround is to use jQuery to show and hide the ‘placeholder’ text when the user focuses on the input field.

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <script type="text/javascript">
        var searchText = 'Enter product name or number';
        $(document).ready(function() {
            $("#q").val(searchText);
            $("#q").focus(function() {
                if ($(this).val() === searchText) {
                    $(this).val('');
                }
            });
            $("#q").blur(function () {
                if ($(this).val() === '') {
                    $(this).val(searchText);
                }
            });
        });
    </script>
</head>
<body>
<form>
    <input name="q" id="q" placeholder="Enter product name or number">
    <input type="submit" value="Search">
</form>
</body>
</html>

which works like this

But using javascript to solve the issue means browsers that do support the placeholder attribute are forced to use the workaround as well…

Modernizer to the rescue

Using Modernizer we are able to detect browser features. This means we only use the jQuery workaround on browsers that don’t support the placeholder attribute.

Here’s the final code showing how to use modernizer and the jsfiddle page to try it out.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript" src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <script type="text/javascript">
        if (Modernizr.input.placeholder) {
        }
        else {
            var searchText = 'Enter product name or number';
            $(document).ready(function() {
                $("#q").val(searchText);
                $("#q").focus(function() {
                    if ($(this).val() === searchText) {
                        $(this).val('');
                    }
                });
                $("#q").blur(function () {
                    if ($(this).val() === '') {
                        $(this).val(searchText);
                    }
                });
            });
        }
    </script>
    <style type="text/css">
        body {
            padding: 10px;
        }

        #q {
            width: 280px;
        }
    </style>
</head>
<body>    
<form>
    <input name="q" id="q" placeholder="Enter product name or number">
    <input type="submit" value="Search">
</form>
</body>
</html>