Mobile User Experience Patterns To Make Sense Of It All Adrian Mendoza
Mobile User Experience Patterns To Make Sense Of It All Adrian Mendoza
Mobile User Experience Patterns To Make Sense Of It All Adrian Mendoza
Mobile User Experience Patterns To Make Sense Of It All Adrian Mendoza
Mobile User Experience Patterns To Make Sense Of It All Adrian Mendoza
1.
Mobile User ExperiencePatterns To Make Sense Of
It All Adrian Mendoza download
https://ebookbell.com/product/mobile-user-experience-patterns-to-
make-sense-of-it-all-adrian-mendoza-37580500
Explore and download more ebooks at ebookbell.com
2.
Here are somerecommended products that we believe you will be
interested in. You can click the link to download.
Designing The Mobile User Experience B Ballard
https://ebookbell.com/product/designing-the-mobile-user-experience-b-
ballard-4688250
Mobile Web Performance Optimization Deliver A Better Mobile User
Experience By Improving And Optimizing Your Website Follow These
Practical Steps For Cuttingedge Application Development S S Niranga
https://ebookbell.com/product/mobile-web-performance-optimization-
deliver-a-better-mobile-user-experience-by-improving-and-optimizing-
your-website-follow-these-practical-steps-for-cuttingedge-application-
development-s-s-niranga-5470892
Experience With Technology Dynamics Of User Experience With Mobile
Media Devices 1st Edition Ali Alazzawi Auth
https://ebookbell.com/product/experience-with-technology-dynamics-of-
user-experience-with-mobile-media-devices-1st-edition-ali-alazzawi-
auth-4342616
Design User Experience And Usability Web Mobile And Product Design
Second International Conference Duxu 2013 Held As Part Of Hci
International 2013 Las Vegas Nv Usa July 2126 2013 Proceedings Part Iv
1st Edition Henning Breuer
https://ebookbell.com/product/design-user-experience-and-usability-
web-mobile-and-product-design-second-international-conference-
duxu-2013-held-as-part-of-hci-international-2013-las-vegas-nv-usa-
july-2126-2013-proceedings-part-iv-1st-edition-henning-breuer-4241844
3.
User Acceptance OfMobile Notifications 1st Edition Tilo Westermann
Auth
https://ebookbell.com/product/user-acceptance-of-mobile-
notifications-1st-edition-tilo-westermann-auth-5886902
Mobile Phones Technology Networks And User Issues Technology Networks
And User Issues 1st Edition Micaela C Barnes Neil P Meyers
https://ebookbell.com/product/mobile-phones-technology-networks-and-
user-issues-technology-networks-and-user-issues-1st-edition-micaela-c-
barnes-neil-p-meyers-51368980
Objectoriented User Interfaces For Personalized Mobile Learning 1st
Edition Efthimios Alepis
https://ebookbell.com/product/objectoriented-user-interfaces-for-
personalized-mobile-learning-1st-edition-efthimios-alepis-4636148
Prototyping Of User Interfaces For Mobile Applications Benjamin Bhr
https://ebookbell.com/product/prototyping-of-user-interfaces-for-
mobile-applications-benjamin-bhr-5765142
Prototyping Of User Interfaces For Mobile Applications 1st Edition Bhr
https://ebookbell.com/product/prototyping-of-user-interfaces-for-
mobile-applications-1st-edition-bhr-11643628
Mobile
User Experience
Patterns toMake Sense of it All
AMSTERDAM • BOSTON • HEIDELBERG • LONDON
NEW YORK • OXFORD • PARIS • SAN DIEGO
SAN FRANCISCO • SINGAPORE • SYDNEY • TOKYO
Morgan Kaufmann is an imprint of Elsevier
Adrian Mendoza
v
To my sonMateo, who teaches me new things every day, and who, at 8 months old,
taught me that if you swipe the iPad screen with your entire hand it switches from one
app to another. That four-finger swipe gesture took me 2 weeks to replicate.
This book is dedicated to you.
Contents vii
Contents
Acknowledgments xvii
AuthorBiography xix
Preface xxi
Chapter 1 Introduction 1
Chapter 2 Why Mobile UX, Why Now? 5
INTRODUCTION 5
THE PERFECT STORM OF MOBILE 6
TECHNOLOGY 6
USERS 7
USER EXPERIENCE 7
13.
viii Contents
THE PROBLEM8
THE OPPORTUNITY 9
Chapter 3 Your Desktop Experience Is Not
Your Mobile Experience 11
INTRODUCTION 11
MOBILE USE IS NOT DESKTOP USE 12
MOBILE USERS ARE NOT YOUR DESKTOP USERS 12
YOU CANNOT FIT EVERYTHING ON ONE SCREEN 13
CUSTOMERS DETERMINE YOUR
USER MOBILE EXPERIENCE 13
RETHINK HYPERLINKING 14
THE MOBILE BROWSER IS LESS FORGIVING 14
SAY GOODBYE TO THE MOUSE 15
BUILDING A MOBILE EXPERIENCE IS MORE
COMPLICATED 15
PLANNING YOUR MOBILE EXPERIENCE 16
LET’S MOVE FORWARD 17
Chapter 4 Understanding the Device 19
INTRODUCTION 19
GETTING TO KNOW iOS 22
AN ANECDOTE ABOUT GESTURES 22
INTRODUCTION TO BEHAVIORS AND
GESTURES IN iOS 23
Behaviors of iOS 26
The Language of Touch Gestures 27
THE iOS KIT OF PARTS 30
Screen Sizes 31
User Interface Elements 32
14.
Contents ix
GETTING TOKNOW ANDROID 44
WELCOME TO THE ANDROID PARTY 44
HARDWARE INTERFACE, ANDROID GESTURES,
AND BEHAVIORS 47
Hardware to Software Interface 47
Android Behaviors and Interactions 48
Touch Gestures 50
UNDERSTANDING THE ANDROID KIT OF PARTS 50
Screen Sizes 51
User Interface Elements 52
TURNING OVER A NEW LEAF 57
UNDERSTANDING EVERYONE ELSE 58
Windows Phone 8 58
Nokia Symbian and Beyond 60
Blackberry 61
GETTING TO KNOW THE TABLET 61
iPad (iOS) 62
Android 63
PUTTING IT ALL TOGETHER 65
NEXT STEPS: BUILDING THE NARRATIVE 65
Chapter 5 How Mobile Wireframing Works 67
INTRODUCTION 67
CREATE CONTEXT 68
Screen Size 70
REPRESENTING PAGE AND SCREEN FLOWS 72
CREATING YOUR FIRST LAYOUT 73
REPRESENTING INPUTS 76
REPRESENTING GESTURES 79
ANNOTATE, ANNOTATE, ANNOTATE 81
WIREFRAMING OTHER CASES 82
REPRESENTING MOTION (ACCELEROMETER) 82
15.
x Contents
REPRESENTING MULTIPLEDEVICES (MOBILE APP) 84
REPRESENTING RESPONSIVE DESIGN
(MOBILE WEB) 85
Chapter 6 Mobile UX Patterns 87
WHY PATTERNS? 87
PATTERN 1: THE LAUNCHER 90
THE BASIC LAYOUT 90
The Header 90
The Work Area 91
Creating Connections 92
ADDING EXTRAS 92
Ads 93
Search and Features 93
THE ADVANCE LAUNCHER 94
Sliding Panels 94
Logging In and Out 95
Personalizing and Customizing the Launcher 95
PATTERN 2: THE TRAY 97
THE BASIC LAYOUT 97
The Active Button 97
The Tray Area 98
The Advanced Tray 99
Good Gestures 100
Avoiding Mistakes 102
PATTERN 3: THE LIST 103
THE BASIC LAYOUT 103
The List Item 104
The Navigation Bar 104
The Navigation Buttons 104
THE ADVANCED LIST 105
Making the Last Page Actionable 105
Using a Dynamic List 106
Avoiding Mistakes 107
16.
Contents xi
PATTERN 4:THE ROTATE 108
THE BASIC LAYOUT 109
The Rotation 110
The Horizontal or Vertical Screen 110
THE ADVANCED ROTATE 110
Designing for the Rotation and Tilt Gesture 111
Changing the Content in Rotated Views 113
GOING EVEN FURTHER 114
PATTERN 5: THE LOG IN 115
THE BASIC FLOW 115
The Log In 115
The Sign-Up 117
The Forgotten Password 119
THE ADVANCED LOGIN: SOCIAL INTEGRATION 119
Avoiding Mistakes 122
PATTERN 6: THE CAMERA 123
THE BASIC FLOW 123
The Camera Screen 124
The Confirm/Add a Filter (Optional) 125
The Action/Share Screen 126
NEXT STEPS 126
PATTERN 7: THE MAP AND LOCATION 129
THE BASIC FLOW 129
The Location Search 130
Android 130
iOS 130
The Map Page 131
The Location Detail Page 132
WHAT’S NEXT? 134
Chapter 7 How to Prototype in Mobile 137
INTRODUCTION 137
WHAT IS MOBILE PROTOTYPING? 138
17.
xii Contents
METHODS OFPROTOTYPING 139
PAPER PROTOTYPING 139
The Mobile Sheet 140
The Notecard 150
EXERCISE 1—GROUP 151
EXERCISE 2—INDIVIDUALS 152
DESKTOP PROTOTYPING 153
The Simple Method 153
The Advanced Method 154
USING THE DEVICE TO PROTOTYPE 157
THE IMAGE PROTOTYPE 157
CREATING A CLICKABLE PROTOTYPE 158
The Prototype Trap 160
Chapter 8 Mobile App or Mobile Web:
The Big Debate 161
INTRODUCTION 161
THE MOBILE APP 161
ADVANTAGES 162
Built Using Native Code 162
Using Device Specific Features 162
Design for Known Devices (iOS) 163
DISADVANTAGES 163
Design for Unknown Devices (Android) 163
Pay to Play 163
The App Store 164
THE MOBILE WEB 165
ADVANTAGES 166
Everyone Has a Browser 166
No Special Code to Build 166
No Need to Push Updates 167
Monetization Is All You 167
18.
Contents xiii
DISADVANTAGES 167
RedirectsAre Still a Problem 167
Multiple Mobile Sites 168
Not All Mobile Only Features Are Available
as APIs 168
RESPONSIVE WEB DESIGN 168
ADVANTAGES 169
Say Goodbye to Redirects and Say Hello
to Break Points 169
No Need to Learn Another Piece
of Software 169
DISADVANTAGES 169
RWD=More Work at Your End 169
Rethink Your Fancy Web Design 170
Performance Problems—The Double-Edged
Sword 171
THE TRIPLE PLAY 172
Chapter 9 The Future of Mobile UX is in Using
Performance Metrics 175
INTRODUCTION 175
FAILURE REDEFINED 177
START DIFFERENTLY 178
Performance Pattern 1:
Limiting Social Interactions 179
Performance Pattern 2:
Limiting Products or Images 182
Performance Pattern 3:
Designing Responsive Web Design (RWD)
with Intent for Every Platform 185
MAKING A PLAN TO TEST ON DEVICES 187
PROVING A POINT 188
A CALL TO ACTION 189
19.
xiv Contents
Appendix AList of Devices from Chapter 1 191
DEVICE LIST 191
PDAS 191
FEATURE PHONES 192
MP3 PLAYERS 192
SMARTPHONES 192
Appendix B List of My Devices from Chapter 4 193
DEVICE LIST 193
PICTURED 193
NOT PICTURED 194
MUSICAL SIM CARDS 194
Appendix C Sample Mobile Sheets from
Chapters 5 and 7 195
Appendix D Mobile Performance Results from
Chapter 9 215
TESTING METHODOLOGY 215
PERFORMANCE PATTERN #1 216
URLs TESTED 216
RESULTS 216
Average Page Load Time 216
Average Page Load Time by Carrier 217
Average Page Load Time by Device 217
20.
Contents xv
PERFORMANCE PATTERN#2 218
URLS TESTED 218
RESULTS 218
Average Page Load Time 218
Average Page Load Time by Carrier 219
Average Page Load Time by Device 219
Want to Learn More about Mobile Performance
Monitoring on Real Devices? 219
Index 221
Acknowledgments xvii
Thank youto my wife, Senofer, for not throwing me out of the house when I took on
another large project, and for proofreading and editing this book. Thank you to Alyssa
Arrigo and Brian Manning for reviewing pages and pages from each chapter. Thank you
to Jason Grigsby for reviewing this book, even while on his vacation, and for the hours of
phone conversations. Thank you to Ted Squire for teaching me to how to fly a spinnaker.
Thank you to author Roger Warner for mentoring me throughout the process. Thank you
to Steve Elliot and Meg Dunkerley from Morgan Kaufmann for pestering me to write this
book until I finally caved in; I am glad I did!
Acknowledgments
Author Biography xix
Adrian’scareer is highlighted by more than twenty years of design and user
experience work. His first studio, Synthesis3, worked with several Palm OS software
companies in creating their brand for both a web and retail presence. His current
business, Mendoza Design, specifically focuses on delivering user experience
design for clients. Adrian has consulted on a variety of user experiences for web
and mobile projects, ranging from orange juice to international airports. In addition,
he is a cofounder of Marlin Mobile, whose focus is on creating tools to measure the
performance of mobile user experiences.
Adrian has taught visual design at Suffolk University, Harvard University, The University
of Southern California, and Massachusetts College of Art. His focus has been on creating
a narrative using digital media. Adrian earned his BA with honors from the University of
Southern California and his Master’s from the Harvard Graduate School of Design.
Author Biography
Preface xxi
A longtime ago (I am talking more than 15 years here), I had the opportunity to meet
the architect Wes Jones at a book signing for his second book, Instrumental Form, in
Santa Monica, California. Among the buzz and giddiness of the architects in the room,
I had an opportunity to talk with him in person. Unlike everyone else who asked him
what his favorite building was or why his buildings looked funny, I asked him this one
question: “What was the most memorable thing about writing your book?” He took a
moment to think about this question. His thoughtful response was this: “After several
months of collecting drawings and writing … after all this hard work. When all was said
and done, this entire book and drawings fit in a tiny tape backup that could fit in the
palm of my hand … this was the most amazing and memorable thing about writing this
book.”
This book was written on an iPad, two MacBooks, and an iPhone. It was written at my
office, on a plane, at home, and in several libraries. For me there was no tape to hold in
my hand to marvel at the compactness of it all. In fact, there was no CD-ROM, USB key,
or portable hard drive. This entire endeavor was saved on cloud storage and shared to
reviewers by email and file sharing. From here, I could open, edit, and save files virtually.
By the time you read this book you probably will have downloaded it directly to your
Kindle or iPad and waited only a few seconds for it to be copied over. This is the new
memorable moment of this book. A book about mobile experience, created and read on
a mobile device.
Preface
Introduction 1
I havea confession. I once owned an Apple Newton MessagePad (Apple’s first PDA),
and along with that, a 14.4 dial-up modem … Checking email on an Apple Newton was
considered cool in 1998. Since then, I have owned an Apple eMate 300, a Palm V with
MENU
MENU
SMARTPHONE
iPHONE
(2007)
FEATURE PHONE
MP3 PLAYER
iPod
Introduction
CHAPTER 1
29.
2 Mobile UserExperience | Patterns to Make Sense of it All
a wireless modem, a Sony Clie, a Palm 3C, a Motorola RAZR, a Motorola SLVR, and a
pile of different iPods, all leading to the iPhone 1G in 2007. You can track the history of
mobile devices from the matrix of devices I have owned. As an experience designer,
now specializing in mobile user experience, I have seen colossal changes in the user
experience from that first Apple Newton to the Apple iPhone, almost 10 years later.
When I began working on user interfaces for Palm OS software in 1998, the form and
experience of the user was secondary to the development and capability of the software,
let alone the limitations of working with gray-scale displays. As feature phones1
emerged,
so did the ability to access the web on our phones, but only wireless application protocol
(WAP)-enabled web pages were available. Imagine trying to view your favorite web
pages, but only if a WAP version of the website was available. If you did manage to
access the site with your limited Internet connection, you would see only text, and, if you
were lucky, a few small images.2
Designing a mobile experience was a challenging and
almost futile effort given the maturity of the desktop web by the mid-2000s.
The iPhone arrived at just the right time and the right place. I don’t want to say
that it was luck, but the stars aligned to bring this kind of design and feature-forward
device to an already engaged and hungry audience. By 2007, user experience
design was no longer a luxury in web design but an integral part of the design and
building process. Complement this with a huge market share of iPods and other
emerging handheld devices (e.g., BlackBerrys, GPS devices) all with highly evolved
user experiences; we had both consumers ready to consume the web on mobile
devices and designers ready on the other end to design interfaces for them. The
mobile age was upon us, and it began by a touch and a slide.
For the first time, mobile devices impacted the rest of the computer industry;
user experience design and the entire software industry, was turned on its head by
something that could fit in your pocket. The iPhone delivered experience designers
1
Feature Phone—Term for mobile phone with basic Internet connection. It mainly opens WAP
enabled web pages.
2
Stan Miastkowski, “How It Works: Wireless Application Protocol,” PCWord.com, July 3, 2000,
http://www.pcworld.com/article/17437/article.html.
30.
Introduction 3
a platformfocused on user interface (UI) and user experience (UX) design; Apple
first published its own UI/UX guidelines,3
which were available when the first iOS
SDK was released. As other mobile platforms followed the iPhone, and Android and
Windows emerged, they also provided guidelines to help build and design for their
own experiences.
As user experience designers, we now had a new challenge of migrating our
web experiences to the new “mobile web” and “mobile apps,” two platforms that
emerged simultaneously. I can still remember one of my first mobile app projects
from early in 2009. Our client’s only direction …“Make the app fun!” This wasn’t a
typical request, and coming from a client in the financial services realm, maybe a
little strange. At that point, the mobile was still the uncharted wild, wild west, and
apps were a novelty.
The more I worked on mobile projects, the more I saw the gap widening
between the design of user experiences in mobiles compared to those on the
desktop. Designers of mobile experience had to take into account new interfaces,
new hardware, unique experience design to each mobile platform, and keep
those designs updated to include the changing form factors of devices. Mobile
user experience was truly a unique discipline that needed its own language for
describing, visualizing, and creating experiences. Before Apple released their
standards, no standards existed for terminology and graphics to help describe
mobile design.
The idea for this book took a few years to evolve into a cohesive notion. I wanted
to help answer the questions: How does one start learning how to design for mobile
UX? What are the differences compared to the desktop? And what makes mobile
UX unique?
This book is a call to action for creating, learning, and visualizing mobile
experiences in a structured, effective manner. The outline and direction are simple:
Use a series of common user experience patterns to describe and implement mobile
3
Originally called iPhone Human Interface Guidelines.
31.
4 Mobile UserExperience | Patterns to Make Sense of it All
experience. These are a set of conceptual patterns that can work across platforms,
device, and users. Yet to balance the conceptual, we need to define the practical
methodologies and tools to demonstrate the experience. How do we wireframe?
What are the user interface elements and code elements to create them, and how
do we distinguish them across the unique platforms? How do I prototype those
experiences? My goal with this book is to create the mobile UX guide/roadmap,
to empower the user experience designer, inform the developer, and engage the
curious reader on mobile user experience design. Our industry will shape how
people interact with mobile devices, and this book is meant to give us the tools and
languages to communicate that experience.
This is not the manifesto of a sole designer; it is one that we will build together.
Now, let’s build some mobile user experiences!
32.
Why Mobile UX,Why Now? 5
INTRODUCTION
A few years ago, I lectured at a college about the future of the mobile web.1
At the
end of the lecture, one of the faculty members approached me with a question. “In the
battle between print and the web, who will win?” Taken aback, I answered with: “The war
has been over for a while, now we are just counting the bodies …” Now imagine what I
would have said had she asked me about the mobile.
In the case of the mobile, it was not a battle but a leveling impact with the force of
an atomic blast. Its effects were fast and far-reaching. The mobile went from being a
Why Mobile UX, Why
Now?
1
Adrian Mendoza, “Design in the Age of Mobility,” MassArt, Boston, MA, October 28, 2010.
CHAPTER 2
33.
6 Mobile UserExperience | Patterns to Make Sense of it All
toy one day to a source of revenue the next. By early 201l, smartphones had outsold
desktops.2
By 2013, worldwide smartphone sales were in the billions (1.8 billion to be
exact).3
To put this in perspective, with the “personal desktop revolution” that started
in the mid-1980s, it has taken more than 20 years to get worldwide PC sales over 300
million (2005).4
With this trend, some users, especially in developing countries, will
access the web on a smartphone before they do on a desktop; this is already the case
in some countries. We have entered the mobile age and it is coming straight at us like a
storm, a perfect storm.
THE PERFECT STORM OF MOBILE
Why a perfect storm? Like the figure of speech for the weather, this storm “arose from
a rare combination of adverse meteorological factors.”5
It took three unique factors to
align and develop to create the mobile storm we are in now. We needed the technology,
the users, and user experience all ready at the same time. Had one or another not been
available, the ecosystem would not have evolved. Let me explain.
TECHNOLOGY
The first factor is the technology itself. By the time the first iPhone appeared, small
devices were already commonplace. Users already had a history with iPods, mp3
players, and PDAs; the general public were accustomed to small handheld devices.
Feature phones6
used some form of Internet access and these were common across
the globe. By this time everyone, including his or her brother, grandmother, or child
2
Dana Wollman, “Smartphones Outsell PCs for the First Time Ever,” Huffington Post, February 02,
2011. http://www.huffingtonpost.com/2011/02/08/smartphones-outsell-pcs-f_n_820454.html.
3
Gartner.com, April 4, 2013, http://www.gartner.com/newsroom/id/2408515.
4
eTForecasts, “Worldwide PC Market.” http://www.etforecasts.com/products/
ES_pcww1203.htm.
5
Oxford English Dictionary.
6
Feature Phone—Term for mobile phone with basic Internet connection. It mainly opens WAP
enabled web pages.
34.
Why Mobile UX,Why Now? 7
had a Motorola Razor phone in their pocket. It was the inclusion of touch technology
and readily available 2G bandwidth that accelerated the use of the smartphone. The
synthesis of a small handheld device with a phone, mp3 player, and camera was the
next logical step in the technology trend.
USERS
The second factor is the users themselves. Like the technology, they were already
familiar with keeping a small handheld device in their pockets. They were familiar with
of using and carrying an mp3 player, phone, and/or camera (sometimes carrying all
three). Combining these three devices was the logical next step. The groundwork
for the usage patterns already existed, and adding Internet usage was a natural
expansion. By the time the first smartphones were launched in 2007, users were
already familiar with using the desktop web. There was no need to teach them about
buying online, accessing their email, looking for a map location, and other web-
based patterns. The learning gap and usage patterns of getting users online had
already been bridged. Some users had been using the web since primary school
at this point, users were not only well versed, they had grown up with the Internet.
The only thing left was to teach them how to optimize these patterns for mobiles; a
smaller feat compared to teaching them how to use the web on a desktop computer
for the first time.
USER EXPERIENCE
The third factor of the perfect storm is user experience as a discipline. By 2007,
user experience design was already considered a formal discipline in the web design
industry. It had become a crucial piece of any web-based design or build. It has
evolved from the art form in its infancy (information design) to the science of user
centric experience design. Now a user experience designer sits between an art director
and the web developer; at times they even manage the project. The science of user
experience design is also the guiding principle of increasing web sales, increasing user
conversions, optimizing design, and retaining users. Web design has been refined from
35.
8 Mobile UserExperience | Patterns to Make Sense of it All
a loosely trained discipline (you usually picked it up on the job) to the formal education
of user experience designer (college degree and certificates). By the time Apple
released the human interface guidelines for their iPhone, it was not a surprise, but rather
an expectation and common practice.
THE PROBLEM
Like learning how to use the web on the desktop for the first time, mobile brought
its own challenges. Compared to the desktop, we have introduced new variables to
creating a user experience on a mobile device. Gone are the consistent factors of
the desktop experience, the large size of bandwidth, and even the user’s focus and
attention to the task. With mobile, you have to take into account the carrier, the type of
device you are on, the operating system, and the screen size; these factors add up to
what I call the “Mobile Equation.”
Think of this as the recipe for designing mobile experiences. Mix the inconsistency
of the carrier and your signal strength depending on your location. Stir in the different
operating systems (Android, iOS, Windows, etc.) and the different versions of each OS.
Whisk in the different form factors and sizes of each mobile device you will be using.
Finally, add in the different screen sizes and types into the equation (LCD, Super AMOLD
displays) and the unpredictable oven temperature of the users’ usage patterns. This
entire equation gives you an insight into the unique challenges of creating a mobile
experience. Why would anyone want to inherit this mess? Why would anyone want
to work on mobiles compared to the desktop? These are questions that can only be
answered by the opportunity that the mobile provides us.
Your
mobile
user
experience
Carrier Device Operating
system
Screen size
The Mobile Equation.
36.
Why Mobile UX,Why Now? 9
THE OPPORTUNITY
Regardless of its rapid growth, innovative technology, or even global reach, mobile
gives us an opportunity that we have never had with the design of desktop web
experiences. The grand vision of Web 2.07
was to connect one-on-one with a user; it was
to provide them with personalized content and a user experience just for them through
the use of dynamic web experiences. In reality, that dream never came to fruition; the
web experience became too busy and overcomplicated the longer we went on. The
mobile enables that dream to come true. It puts one Internet-enabled device in the hand
of a single user. It gives them the power to access the web at anytime and at any place
and the option to broadcast or connect directly one-on-one. It is this usage pattern that
presents us the opportunity to design a mobile user experience that can be consumed
on a one-on-one basis. Users will carry our mobile experiences with them anywhere
and open them anytime. It is this same mobile experience that they can engage with
and keep in their pocket; it is both their personal and public persona. The mobile gives
a single user a camera, an open web connection, a way of posting, tweeting, and
messaging to the outside world. It is their voice; you can help design a mobile user
experience to enhance it. This is the mobile opportunity.
7
Web 2.0—Term coined in early 2000s to describe dynamic websites with user generated or
social media content.
Your Desktop ExperienceIs Not Your Mobile Experience 11
INTRODUCTION
Like working in any medium (painting, sculpture, or even user experience), we need to learn
a set of basic rules that act as guiding principles for our craft. For the mobile, I refer to these as
mobile mantras. Like any mantra, these should be repeated, shared, and—if you want to—
chanted. You might consider them practical, conceptual, or even spiritual; regardless, these
mantras will help guide your journey when creating a mobile user experience. Let’s start.
The mobile experience is a completely separate entity from the desktop experience.
If everything about the mobile is different—its screen size, Internet connection, device
size, and the mindset of the person as they approach the site—why would you take
your existing desktop experience and copy it? This would be like trying to fit 3 pounds of
sugar in a 1-pound bag. I would even go as far as pushing the simile of a mobile from
a 1-pound bag to a 1-ounce bag. This may sound a little overly dramatic, but in fact the
Your Desktop
Experience Is Not Your
Mobile Experience
CHAPTER 3
MOBILE MANTRA #1:
YOUR DESKTOP EXPERIENCE IS
NOT YOUR MOBILE EXPERIENCE
39.
12 Mobile UserExperience | Patterns to Make Sense of it All
differences between the desktop and mobile experiences are vast and provide the two
with distinct strengths and weaknesses. Let’s take a look at a few.
MOBILE USE IS NOT DESKTOP USE
In reality, we spend too much time in front of our desktops; we are searching and
researching and, when we are done, we search again. As a result, we create larger user
experiences catering to the longer timeframe that users focus on a page. When taking time
to use a desktop, users are usually at home, in a café, on a plane, or somewhere where
they are seated and taking a few moments to open and boot up their computer. They are
focused on the screen. When looking at the mobile, we are looking at smaller increments
of time that a user spends in front of their smartphones. An average time per interaction on
a mobile device is 17 minutes compared to 39 minutes on a desktop.1
When people are
on their phones, they are in a conversation, commuting, or waiting for a meeting; they are
interacting with the phone in another environment not centered on the phone. As a result,
we need to take into account this bite-sized experience and design for it.
MOBILE USERS ARE NOT YOUR
DESKTOP USERS
Remember the great marketing debate between Apple and PC users? Each seems
so different. In reality, the differences are miniscule compared to that of desktop versus
mobile users. The difference between mobile users themselves is at times staggering;
iPhone users are younger and more affluent (higher income bracket), Android users
view more mobile content (while iPhone users are more engaged with the content),
and iPhone users are more likely to make purchases on a mobile device than Android
users.2
This is just a sampling of trends. Add into the mix your own customers and
1
Google, “The New Multi-screen World: Understanding Cross-Platform Consumer Behavior,”
August 2012.
2
Comscore, “Android vs. iOS: User Differences Every Developer Should Know,” March 6, 2013,
http://www.comscore.com/Insights/Blog/Android_vs_iOS_User_Differences_Every_Developer_
Should_Know#imageview/0/.
40.
Your Desktop ExperienceIs Not Your Mobile Experience 13
users, and you now have a more complex view of the mobile user ecosystem. Feels
like that’s not enough? Add into the mix the differences between smartphone and tablet
users, you have an even more complex view of your mobile users. Take all of this into
account and include different devices, carriers, operating systems, and screen sizes
(the Mobile Equation); your mobile users look more and more different from their
desktop counterparts.
YOU CANNOT FIT EVERYTHING
ON ONE SCREEN
Having desktop screens that are now 1200 pixels wide and growing has spoiled us.
The typical web experience uses several columns of information and pages to organize
its content and functionality. Good user experience for the desktop tells us to lay out all
of the options as a large sitemap and use wizards to walk us through a step-by-step
experience—the more options available on the page the better. The mobile takes this
away and creates a single, linear story. The more screens a user has to scroll through
means death for our mobile experience. Cramming everything on a screen and trying
to make it readable is now replaced by delivering only the bare essentials, one easily
digestible piece at a time.
CUSTOMERS DETERMINE YOUR USER
MOBILE EXPERIENCE
The role of customer feedback is more important than ever. A mobile customer will
do less than your desktop customer. Finding out what they will be able to do is critical to
building your mobile experience. Feedback and customer conversations play a critical
role in designing your mobile strategy. What will they be willing to do on a tablet versus a
smartphone? What do they want to do on a mobile? Does that compare with what you want
them to do? Getting these answers will be the first step in creating your mobile experience.
Remember that by not doing so, your phone number is just one touch away … and so is
their complaint. Every complaint from an unhappy mobile customer to your call center will
cost you money and brand equity.
41.
14 Mobile UserExperience | Patterns to Make Sense of it All
RETHINK HYPERLINKING
Hyperlinking has always been the unique characteristic of the constant desktop
web surfer. If you want to go somewhere new, it is just a click away. And while you
are at it, open a few tabs, windows, or different browsers at the same time and toggle
between all of them. This is a less fluid experience in a mobile. By necessity, the mobile
provides a streamlined, linear experience. Going back to our point about knowing your
mobile web user, you need to have a clear idea of what this path should be in order to
construct it.
Our mobile browser is much smaller and more difficult to navigate. The concept of tabs
on the mobile browser has been replaced with browser windows that open on another
screen; the user experience of moving back and forth from one window to another is
difficult, breaking the pattern of multi-window web surfing. If users are forced to open
a new browser window, they are unlikely to go back. If a screen is too crowded, they
are unlikely to take the time to sift through it to find what they want. The default browser
loading into our devices has also limited unique user experience flows. Until recently,
we have seen the rise of other browsers as apps and newer browser engines (Chrome
app, Firefox app, Blink browser engine); all of which have their own user experiences
and compatibility issues. This adds another layer of inconsistency for surfing our mobile
experience.
Working on an app instead? As your workflow is limited to being only inside your app,
you will need to rethink how to capture the user’s attention and focus; if not, one push of
a home button and they are out of your mobile experience.
THE MOBILE BROWSER IS LESS
FORGIVING
One way or another something in your mobile experience will be connected to the
Internet or web browser. Most mobile apps use what’s called the embedded web view
to open a mobile web window from inside the app; this is a very popular trend in app
design. Gone are the days where we can launch websites that don’t have cross-browser
42.
Your Desktop ExperienceIs Not Your Mobile Experience 15
compatibility. Impressed by your fancy parallax effect3
on your new website? Look at
it again on a mobile browser; it more than likely won’t be working. Impressed by all
the fancy AJAX script you have on your page? Be prepared to faint when it takes over
10 seconds to load. If you don’t think you are mobile, think again. Users are already
accessing your web pages on mobile devices. Hello websites, welcome to the mobile.
SAY GOODBYE TO THE MOUSE
I will be the first one to write the obituary when we finally bury our mice. For many
years we have used the mouse as a crutch. By removing the pinpoint accuracy of the
mouse with touch gestures, we are forced to rethink the user experience for inputting
information. Without the pinpoint accuracy of a mouse, forms and complicated
selections need to be completely redesigned. As a result, it has focused us on making
smaller pages, cleaner information layouts, and larger user interface elements. We
will have to optimize user experiences for mobiles, making them better for our users.
Goodbye mouse, hello touch.
BUILDING A MOBILE EXPERIENCE IS
MORE COMPLICATED
Unlike working on the desktop, building an app or mobile website requires user
experience design, user interface design, and the development to be completely
integrated from the start of the project. Want to change the UI of a button? Well, by
doing so you have just changed the user experience pattern and development time. If
you decide to change the experience pattern for a screen, you have just added more
work for the user interface designer and developer. If you decide to do a quick change
in your iOS and Android code, you have possibly changed the user experience and UI
design across multiple screens or for multiple devices. Gone are the days of fly-by-night
web development, where anyone with a text editor could change a web page. What has
arrived is the integrated and interconnected world of mobile design and development.
3
Parallax Effect—Scrolling effect on desktop websites that overlaps images.
43.
16 Mobile UserExperience | Patterns to Make Sense of it All
Finally we get to create great experiences as they are meant to be! But we do need to
do a bit of planning to get there.
PLANNING YOUR MOBILE EXPERIENCE
The next step in preparing a mobile experience is to create a plan. Implementing a
user flow, we can explore the differences between our desktop and mobile scenarios.
A user flow allows us to lay out a preliminary schematic design of how our users will
explore our experience before we get to wireframes. You might create different user
flows for a desktop, iPhone, or Android experience; one design will not fit all. Implement
a user flow to plan out specific mobile functionality.
Open keyboard
by default Confirmation sent to email
(mobile optimized email)
Home/
products
Ordering product on mobile
Product
detail
Order
confirmation
Log in Cart
Example of Mobile User Flow #1.
Open
camera on
device
Rescan option
Open UPC
scanner API
Share on Facebook
Share on Twitter
Share by Email
Homepage
Scanning UPC code on mobile
Scan UPC
camera
Display
results
Example of Mobile User Flow #2.
44.
Your Desktop ExperienceIs Not Your Mobile Experience 17
Depending on the mobile experience you want to create; the user flow needs to
answer a few important questions:
1. Is it small?—Show that the path is short enough for a mobile user to complete.
2. Is it optimized for mobile?—Show any use of the camera, accelerometers, or
other mobile-specific features.
3. Is it optimized for our mobile users?—Show that the path is clear for what the
mobile users want and expect; make it easy to complete this path or function.
4. Is it designed for a specific platform?—Create a flow tailored to the mobile
specific platform that you are designing for.
5. Does it integrate the embedded web view if it’s an app?—Show areas in your
app where you will display mobile web content.
Once you complete your plan, you can compare it with your desktop strategy. The
mobile may have its own separate and unique strategy, but it does not mean that it
cannot complement or supplement your desktop experience.
LET’S MOVE FORWARD
Sometimes you need to take two steps back to take one leap forward. Great user
experiences have a tendency of being copied and reused. A good user experience
you make today may show up in another application tomorrow. Don’t be afraid to look,
learn, and experiment. Like my example of the mouse, mobile experiences are already
having great influence on other mobile platforms and the desktop. Even if you have
never designed or built for the desktop, your mobile experience may one day help
influence a desktop experience. The differences in the desktop and mobile we see
today might not be the same in a few years or even a few months. Remember that a
growing number of users may never touch the desktop at all and at a minimum will visit
your mobile experience first. Your mobile website will be their entire introduction to the
brand, website, and customer experience you are trying to create. And we all know the
importance of first impressions.
Understanding the Device19
INTRODUCTION
Understanding the
Device
CHAPTER 4
MOBILE MANTRA #2:
BE ON THE DEVICE
47.
20 Mobile UserExperience | Patterns to Make Sense of it All
The first time I heard this, I laughed at the phrase. It was such a ludicrous concept.
Why would I need to be on the device? Why would someone own every phone model?
This wasn’t the case on my Palm OS device or Apple Newton, but the smartphone was
a different beast. The differences between the first iPhone and the first Android device
were night and day. Not only was the hardware distinctive, but the user interface alone
was enough to transform my opinion about this phrase.
Now, after spending time with smartphones, I am a big believer of “being on the
device.” It has become a mantra I teach all designers and developers I meet. It is the
first phrase I share when I am asked about the differences between mobile platforms
and the last thing I repeat to others when I am asked to test an application or mobile
website. The mantra is rooted in a single premise: to best understand an iPhone or
Android device you need to feel it in your hand, to experience it personally. Only in this
way can you capture the tactile and complementary nature of how interactions affect
the UI. Only in this way can you answer the questions of differences between any
smartphone. Without the experience of actually using what you have designed on a
device, you have no way of refining it. How does my hand reach for a button? How big
do my buttons and UI elements need to be when I touch or swipe? What happens when
I first turn on the device? What happens when I open or close an app or mobile website?
48.
Understanding the Device21
If you are planning on designing or developing in iOS, get an iPhone; if you are
planning on Android, get an Android device—or two or three. If you are planning on
working on a tablet, get a tablet…. You can see where I am going with this. Only by
being on the device can you get the true user experience and a thorough understanding
of how you can shape the experience to account for difference between devices,
operating systems, screen sizes, and form factors.
The goal of this chapter is to provide a primer for starting to design on multiple
platforms. To begin designing for each experience you need to know how the platforms
work and what are the unique user interactions, user interface elements, terminology,
and device characteristics. Once you have the basics you can start building your unique
experience across each platform.
EXERCISE #1:
GOING FOR A WALK
Walk into your local phone carrier store (e.g., a Verizon wireless store, an Apple store,
or an O2 store in the U.K.). Plan an afternoon or morning for this. Go to the demo
phones and open the same mobile website on as many as you can. If you want, load
in the same app as well. Once you’re done, try this at another carrier store.
You will notice several differences when you jump from device to device: the hardware
buttons are different, the button locations are different, and even the weight is different.
Even how you hold a device in your hand changes on different platforms. Once you
engage with the UI, you will also notice differences in versions of the operating system
and the screen configuration. By opening the same website or app you will see the
differences in how the screen, UI, and functionality are displayed; each device will treat
that experience differently. Now, imagine all your users or customers having the same
experience when trying to open your mobile website or app.
49.
22 Mobile UserExperience | Patterns to Make Sense of it All
GETTING TO KNOW iOS
AN ANECDOTE ABOUT GESTURES
Hidden away in the lobby of one of the big digital ad agencies in Boston sits a piece
of mobile history. Cluttered with some fancy modernist seats, a digital vending machine,
and a slick over-designed reception desk sits a table that you might confuse for a
vintage Pac Man tabletop game if you didn’t give it a second look. In 2007, Microsoft
released their first version of a touch-based operating system called Surface. Integrated
into a tabletop, most passersby in this lobby would not even know that this table was the
one of the first touch-based interactive experiences.
In 2010 my two business partners and I sat in this company’s lobby, waiting for a
meeting. I walked up to the table and swiped to unlock it, selecting an image with both
hands, I began to scale and rotate images and applications. With a flick of a finger, a push
of my hand, I began to control the user interface like a pro. With a puzzled look, my two
Microsoft Surface Table Circa 2007.
50.
Understanding the Device23
partners stared in disbelief—How could I learn and control all of these functions of this
operating system in such a short time? One of them finally asked, “Have you used one of
these tables before?”
My response: “No I have never used one of these before in my life.” To their surprise
they both asked “How did you learn how to use it so fast?”
“YouTube.”
INTRODUCTION TO BEHAVIORS AND
GESTURES IN iOS
EXERCISE #2:
AN INTRODUCTION TO THE iPHONE
Ask your friends, family, and colleagues this one simple question: What was the
first thing you did when you got your iPhone?
To your surprise you will get back several responses ranging from: I plugged it in,
I called my mom, I opened the box, I synced it with iTunes, I started surfing the
web, downloaded an app … and a few others that you might not expect.
51.
24 Mobile UserExperience | Patterns to Make Sense of it All
52.
Understanding the Device25
In reality, all iPhone owners will encounter the same first learning experience without
even realizing it. They have all encountered the welcome screen as the iPhone turns on
for the first time.
In less than a second all new iPhone users learn all of the basic interactions in
using the device:
1. Touch the home button with your finger to turn the phone on.
2. Touch and slide the screen to unlock it.
As a user experience designer, this is the pinnacle of what we refer to as the
“5second learn.” In these critical first five seconds of grasping a user’s attention the
iPhone has taught its new users how to use it. In this basic screen the mobile experience
has also taught the users some basic interactions as well:
1. The screen is touch based.
2. User interface elements are touch based.
3. The user will need to use fluid gestures, such as touch and swipe to engage the
user interface elements.
4. The hardware buttons are secondary to the touch experience.
There is no manual with required reading, no long description for the users to read on
the screen, no special alphabet to learn, no tutorials to go through, no call to customer
support and definitely, no YouTube videos to watch. In less than 5s, the user has been
introduced to the world of iOS and using its touch gestures.
53.
26 Mobile UserExperience | Patterns to Make Sense of it All
Behaviors of iOS
Gestures were not the only innovative concept presented with the first iPhone. Once
past the welcome screen, the user encounters a home screen with icons. These icons
are designed to launch applications from this landing page. This concept of the “App”
was new to users with the first iPhone release. Its use of icons as navigation and their
relationship back to the “App” was critical in creating a scaled-down version of the
desktop experience. This mobile experience would not mimic its desktop counterpart,
but bring familiar desktop processes to people in more “bite-sized” chunks; hence the
“app” was born.
The idea of an icon-based launcher was nothing new to mobile audiences; this
concept had been previously seen in the Palm OS world. Unlike it predecessor, the
iPhone added a section to the bottom of the screen to launch primary applications
IPhone Home Screen.
54.
Understanding the Device27
and a phone dialer. This idea of a bottom-based navigation would be a consistent
navigation element that would be commonly deployed across most platforms. Another
and perhaps the most lasting and influential innovation was Apple’s creation of a
standardized library of intuitive gestures, interactions, and user interface elements to
produce a consistent user experience.
The Language of Touch Gestures
The iPhone introduced the world to a series of unique touch gestures. The idea of
controlling a digital interface with a touch was not new; several years earlier the ability
to touch and activate a screen was very common in kiosks and game devices. What
made this event new was the language of gestures that was introduced in the iOS to
complement its initial touch gesture. These gestures have since become part of the
basic lexicon of how people approach devices.
The Tap
The tap gesture is the building block of the iOS platform.
The uniqueness of this element is the usage of pressure
sensitive glass to enable the finger pressure of the user to
come in contact with the screen, a feature now universal to all
touch-based mobile devices. This gesture engages the user
interface elements using a minimum 44 × 44 point active area
around a button or slider. This accounts for the signature larger,
rounded UI elements that the iOS is known for. The pressure
sensitive screen allows the user to hold down as lightly or as
forcibly as needed. This use of sensitivity allows for tapping,
flicking, and dragging of a finger using the same touch gesture,
it is the building block of the gestures explained below.
Tap Gesture.
were not assuagedby the hearty cheer which Fairview gave her
rival.
“Now—boys, three—three cheers for Fairview!” called Kindlings
brokenly, in return, and his voice was not the only one that faltered
when the tiger was given.
Silently the Randall crowd left the grandstands, while the
victorious cohorts of Fairview were singing their songs.
“Boys!” cried Bean Perkins, eagerly, “don’t let our fellows go off
that way. Give ’em the ‘Conquer or Die’ song, but—sing it softly!”
And then, out over the big field, welled the beautiful strains of the
Latin hymn. The effect was wonderful, for the boys were good
singers. The great crowd halted and listened, as the last chords died
softly away.
Then came a great cheer—a cheer from friend and opponent alike
—a cheer for defeated Randall—for Randall that had not conquered,
but had been conquered. Then the players filed to their dressing
rooms.
57.
CHAPTER XXV
BITTER DAYS
“Shallwe look up the girls?” asked Phil softly, as he clasped his
arm in that of Tom’s, and limped with him from the rooms under the
grandstand. “They’ll want to see us.”
“But I don’t want to see them!” exclaimed the end, half fiercely. “I
don’t want to see anybody. I want to go off in the dark somewhere,
and——”
He stopped, for he felt a raging spirit within him that he knew was
not good.
“It’s tough, old man,” spoke Phil, softly, “but maybe it will be best
for old Randall in the end.”
“Best nothing! It never would have happened if we’d had you and
Sid on the team.”
“Oh, yes, it might.”
But Tom would not have it so, and clung to the dispute until
someone started an argument about the referee’s ruling on a certain
point, and then the subject was quickly changed.
“Better come over and see the girls,” urged Phil again, as he
walked along on his crutch. “Sid will want to know what they said,
and you know he can’t get out for a couple of days.”
“Oh, all right,” Tom almost snapped.
“They won’t rub it in—they’ll know how we feel,” went on the
quarter-back. And to the credit of Ruth, Madge and Mabel, be it said
that though they were Fairview girls, and their college had downed
Randall, which had not happened in a blue moon before, they never
58.
so much as“looked” the triumph they must have felt. They knew the
bitterness of defeat, and—well, they were wise little damsels.
They talked of anything but football, though the reference to Phil’s
injury and to Sid’s illness naturally verged on it. Then they got on
safer ground, and, as Tom walked along with Ruth, while Phil had
Madge Tyler on one side and Mabel Harrison on the other, the
bitterness, in a measure, passed from them.
“We’ll do up Boxer Hall twice as bad!” predicted Tom.
“That’s right,” agreed Phil. “I’ll play then, and——”
“Don’t boast!” called his sister, with a laugh.
The girls sent messages of condolence to Sid. Tom and Phil
hurried to tell their chum all about it. Sid had improved enough to
enable him to be moved to their room, and there, with him in bed,
the game was played all over again.
“It wasn’t the poor playing of any one man, or any two or three
men,” declared Tom. “It was the fault of the whole team. We’re
crippled, that’s what we are, and we’ve got to get in shape for the
rest of the season, or——”
The possibility was not to be mentioned.
“I don’t suppose anything like this would happen again in years,
that we’d lose so many players,” spoke Phil. “We can’t always play in
luck.”
“Kindlings feels it pretty fierce,” said Tom. “He couldn’t talk when
he came off the field.”
“Yes, it’s got him bad,” agreed Phil. “Well, we’ll have to do better,
that’s all. I think Simpson is booked for good on the ’varsity, after
the dandy game he put up in the second half.”
“Yes,” came from Tom. “The Snail means all right, but he’s too
slow. Frank will help the team a whole lot.”
59.
“Tell me abouthis playing,” urged Sid, and they gave it to him,
point by point.
There were bitter days for Randall following the Fairview game,
and for a time it seemed that the defeat would work havoc with the
team. But Mr. Lighton was a wise coach, and he only laughed at the
gloomy predictions.
“Oh, we’ll come into our own, soon,” he declared. “Get right into
practice, and keep it up.”
Phil was able to be in his old place a couple of days later, and Sid
was soon off the sick list, so that the team was once more in shape.
Simpson was voted a “find,” and showed up well at guard. Bascome
also improved under the influence of the presence of the big
Californian.
“Well, I think we’re gradually getting into shape again, captain,”
remarked the coach to Kindlings one day, after some hard practice,
during which the scrub had been “pushed all over the field, and had
its nose rubbed in the dirt,” as Holly Cross picturesquely expressed
it.
“Yes,” agreed Dan Woodhouse. “We miss Bricktop and Ed Kerr, but
what can’t be cured must be put up in pickles, as the old woman
said when she kissed the broom.”
“Cow, you mean,” corrected the coach.
“I make my own proverbs,” replied Kindlings, with a laugh. “They
keep better. But, seriously, I think we will shape up pretty well for
the Boxer game. We’ve got a couple of contests in between, one
with the Waram Prep, and the other with Duncan College. We will
take both of those, and that will make the boys feel better.”
“Yes, a little victory, now and then——”
“Makes good dressing on your salad,” finished Dan, with a laugh.
Though football took up much of the time of our heroes, with Phil
and Sid again on the active list, they had not forgotten their quest
60.
after their belovedchair, nor had they given up their plan of
discovering who took the clock.
But, as the days passed, our friends were no nearer a solution
than they had been in the past. They kept watch on Bascome and
Lenton, but nothing developed, and they did not like to make any
inquiries.
The bitterness of the Fairview defeat still lingered like a bad taste,
in the mouth of the Randall gridiron knights, but it was being
overshadowed by the game which would soon be played with Boxer
Hall. This season they would clash but once with those doughty
warriors, and according to the games that had thus far been played
in the Tonoka Lake League, the championship was practically a tie
between Randall and Boxer Hall.
“If we win all our other games, and we’re likely to do that,” said
Kindlings, “all we need to do is to wallop Boxer Hall, and the
championship is ours.”
“Yes, that’s all,” remarked Dutch Housenlager. “It’s easily said, but
not so easy to do.”
“Get out, you old catamaran!” cried Holly Cross.
It was one morning at chapel, following the annual reunion of the
“Old Grads” of Randall, that President Churchill made an
announcement that caused quite a sensation.
“I have bad news to announce,” he said, as he stood on the
platform after the devotional exercises. “There has been a
conference between our lawyers and those representing the
claimants to our land. They demand twenty thousand dollars in
settlement.”
There was a gasp of surprise that went around the chapel like a
wave of hysteria among a lot of girls.
“Twenty thousand dollars!” whispered Tom Parsons.
“Randall can never pay it,” remarked Sid, who sat next to him.
61.
Dr. Churchill waitedfor the murmurs to cease.
“I need hardly add,” he continued, “that it is out of the question
for us to pay this sum. Yet, if we do not, we may lose all that we
hold dear,” and the president seemed much affected. “However, we
have not given up the fight, and there may yet be a loophole of
escape. You may now go to your classes.”
62.
CHAPTER XXVI
MOSES INPHYSICS
“Say, fellows, have you heard the news?” burst out Dutch
Housenlager one morning after chapel, about a week following the
announcement about the twenty thousand dollars being demanded.
“News? What news?” inquired Holly Cross.
“Has the lawsuit been called off?” asked Tom.
“Or has Bricktop Molloy decided to come back to play on the
eleven?” demanded Sid.
“Neither one, but we’re in for no end of a lark.”
“Oh, yes. If there’s anything funny in the wind, you can depend on
Dutch to ferret it out,” spoke Phil. “Well, what is it now, you old
Hollander?”
“Prof. Newton is down with the pip, or something, and can’t take
his chemistry or physics classes to-day. They’re shy one other
teacher, so Prexy is going to handle the physics recitation. What a
cinch it’ll be! I’m not up in mine, but Moses is sure to ask us where
the lesson is. We won’t do a thing but steer him back to one we had
a week ago. Then I’ll be safe.”
“You can, if you like,” spoke Tom, “but I’m not going to. I’ve got
mine, and it’s a shame to put one over Moses.”
“Aw, what’s the harm?” demanded Dutch. “It will amount to the
same thing in the end. Now don’t go to spoiling my fun. I’m not up,
I tell you, and I don’t want to get any more crosses than I have. My
record won’t stand it.”
63.
“Then you cando the funny work,” declared Phil. “If he asks any
of us——”
“I’ll sing out about a back lesson,” interrupted Dutch. “Then I’ll be
safe. Anyhow, Moses will be sure to ask about three questions, and
they will remind him of something about Sanskrit or modern
Chinese, and he’ll swing into a talk about what the ancient
Babylonians did in war time. Then you fellows will call me blessed,
for you won’t have any physics to prepare to-morrow, when Prof.
Newton will likely be back.”
“Have it your own way,” spoke Holly Cross.
As usual when there occurred a change in the routine of lectures
or classes there was more or less of a spirit of unrest or mischief
among the students. Those in the natural science division filed into
the room where Professor Newton usually held sway, and it was
quickly whispered about that “Moses” would appear to hear them.
The venerable president entered with his usual book under his
arm, for he studied early and late—harder than the “greasiest dig
that ever kept the incandescent going,” to quote Holly Cross.
“Ah, young gentlemen,” began Dr. Churchill, blandly, “I presume
you are surprised to see me, but your instructor is ill, and I will
endeavor to take his place. You are—er—you are in advanced
science, are you not? I believe I have the right class,” and the good
doctor, somewhat puzzled, consulted a memorandum slip in his
hand. “Yes, this is the class,” he went on, with an air of relief. “Now,
to-day’s lesson was to be on—er—I’m afraid I have forgotten.
Professor Newton told me, but it has slipped my mind.”
It was exactly what Dutch Housenlager had counted on, and he
was ready to take advantage of it.
“But of course,” continued the president, with a smile, “you
students will know where it is.” He opened the physics book, and
leafed it over, as though the lesson would be disclosed to him in
some supernatural way. All eyes turned to Dutch, for his impending
game had become whispered about.
64.
“I think it’spage three hundred forty-seven, Dr. Churchill,” said
Dutch, mentioning a lesson about a week old.
“Ah, yes,” went on the president. “I see. It has to do with heat
and cold, sudden changes of temperature and the effects produced
by each. Very interesting, very. I trust you are all prepared?”
“If we aren’t, it’s funny,” murmured Dutch, for they had recited on
it several times in review.
“Speaking of the changes produced by sudden changes of
temperature, can you give me a common example?” asked the
president, his eyes roving about the room. Dutch seemed so eager
to recite, and have it done with, that his agitation could not but be
noticed. “You may answer, Mr. Housenlager,” finished Dr. Churchill.
“Ice and snow,” came the ready reply. Dutch breathed easy again.
He thought he was done for the day.
“Very true,” continued Dr. Churchill easily, “but that is a little too
common. I referred to the Prince Rupert drops. I dare say you all
know what they are. Mr. Housenlager, you will kindly explain to the
class how they are made, the effect they produce, and what
principle they illustrate.”
The doctor sat down, and all eyes were once more turned toward
Dutch. Nearly every lad in the class could have given some sort of
answer, for they had seen the curious glass drops broken by their
regular teacher. But, as it happened, Dutch had been absent when
that subject came up, and, as he made it a practice never to inquire
what went on in the lecture room when he was not present, he was
wholly at sea regarding the drops. He had a hazy idea regarding
them, however, and resolved to hazard a recitation. It was better
than complete failure.
As “every schoolboy” (to quote a well known authority) knows
what the Prince Rupert drops are, I will only state that they are
globules of glass, pear shaped, with a long thin “tail” of the same
brittle material. They are formed by dropping molten glass into
water. The outside cools quickly, a long tail is formed, and there
65.
results an unequalstrain on the glass, because the outside part has
cooled faster than the inside. The instant a small part of the “tail” is
broken off, the entire drop crumbles to glass-dust, the pressure once
more being equalized.
It was this object and phenomenon that Dutch was called on to
recite about. He rose in his seat, and began with an air of
confidence that he did not feel:
“The Rupert drops illustrate the power of hot water or steam.
They are globules of glass, filled with water, and, when they are
heated, they burst to pieces, showing the expansive force of heat.”
The class wanted to roar. Dr. Churchill raised his eyebrows in
surprise. Dutch had described another glass object used in the class
room, and his explanation of that had been correct, but it was as
different from a Prince Rupert drop as a ham sandwich is from
chicken.
“Ah—um,” mused the president, putting on his glasses, and gazing
at Dutch through them. “Very interesting, Mr. Housenlager—very—
but—hardly what I asked you.”
“I—er I—er—I’m afraid I’m not prepared, sir,” stammered the fun-
loving youth, and the smiles went round the class.
“Too bad—don’t you want to try again?” asked the president.
Dutch thought, and thought hard, but the more he tried to use his
brain, the more foreign Prince Rupert seemed to him. He gave it up.
“Failure,” murmured Dr. Churchill, as he marked it down against
Dutch. “You may try, Parsons.”
Tom gave the right answer. Dutch gave a gasp of surprise, and it
was noticed that he paid very close attention to the rest of the
lesson. But it did not go much farther, for, as Dutch had predicted,
the president soon got on a strain that interested him, and, ignoring
the text book, which was opened at the wrong page, he swept into a
talk on something about as far from physics as is bookkeeping.
66.
But the “gooseof Dutch had been done to a lovely brown,” once
more quoting Holly Cross. His trick had turned against him, for, had
he given the proper page, or had he allowed anyone else to do so,
the chances are that he would not have been called on. He made
himself conspicuous, and so fell before the good doctor.
“Well, Dutch,” remarked Holly, as they filed from the room, “don’t
you want to try it on again in our Latin class?”
“Cut it out!” advised Dutch gruffly, as he marched on. “I know
when I’ve had enough.”
67.
CHAPTER XXVII
THE DANCECARD
“You look all right, Sid; you’ll pass!”
“Hey! What’s that?” and Sid Henderson swung around from the
mirror over his bureau, with a somewhat guilty flush on his face.
“I said you’d do,” repeated Tom, with a mischievous grin, as he
stood in the doorway of the room, having paused in the act of
entering. “What were you doing, putting on a beauty mark, or
looking to see if you needed a shave?”
“I was trying to get my tie straight,” growled Sid, as he fastened
his low cut vest, for he was in his evening clothes.
“Get out, you musty old misogynist!” exploded Phil, following Tom
into the room. “We know what you were doing, all right. You wanted
to see if you were good-looking enough, so that you could dance
with Mabel all the evening.”
Sid looked around for something to throw at his tormenting
roommates, but nothing was handy. Besides, he might crack the stiff
bosom of his shirt, the snowy expanse of which reflected back the
glow of the incandescent light.
“If you fellows are going to the racket, it’s about time you togged
up,” went on Sid, as he carefully took a seat in a chair. He did not
sink luxuriously onto the sofa this time, for fear of “mussing himself
up,” as Holly Cross would have said.
“Oh, we’ll be ready in jig time!” cried Phil, throwing his coat on
one chair, his vest on another, and, almost before the garments had
landed in “artistic confusion,” he was changing his shoes.
68.
“We went toa football meeting,” explained Tom, as he shed his
ordinary raiment and proceeded to “tog up.”
“Anything doing?” asked Sid, as he manicured his nails.
“Oh, for the love of tripe! Look at him!” cried Phil, with his head
half way through a clean shirt. “Say, you’d think he was going to a
coming-out party, instead of to a Fairview frat. dance. Oh, Tom, is
my back hair on straight?” and Phil, who had uttered the last in a
shrill falsetto voice, tried to look at the after-portion of his shock of
football hair.
“Say, when you fellows know how to act like gentlemen instead of
like a bunch of rough-necks, I’ll talk to you,” spoke Sid, with dignity.
“I asked you a question, Tom.”
“Oh, yes, about the football meeting,” went on the end. “Well, you
needn’t get on your ear just because we jollied you a little. Stand
the gaff like a man. No, there wasn’t much doing. We talked over
some new plays. Incidentally we tried to explain the slump Randall
seems to be up against, but we couldn’t. Where were you?”
“Don’t ask him. He was up here fussing worse than a girl,” broke
in Phil. “Hannibal’s henpecked hyperbolas! But do you remember the
time, Tom, when we couldn’t get Sid to look at a girl, much less to
take one to a dance? Now he feels hurt if he doesn’t do the
Cubanola Glide with one at least once a week. Vanity, thy name is
Sid Henderson!”
“Oh, cheese it, for cats’ sake!” begged Sid, in despair. Then Phil,
who seemed to take delight in “rigging” his chum, glanced at the
battered old alarm clock, which was again on duty.
“Cæsar’s grandmother!” cried the quarter-back. “I’ll be late,” and
forthwith he began to make motions “like a fellow dressing in a
hurry,” as he said afterward, and Sid was left in peace to complete
his immaculate attire, while Tom, too, seeing the need of haste, left
off “badgering” Sid.
69.
It was theoccasion of one of the several dances that the girls of
Fairview Institute had arranged, and to which they were allowed to
ask their friends. Of course, Miss Philock, the preceptress, was chief
chaperone, and there were other elderly teachers who took part.
Tom, Phil and Sid, together with a number of other students from
Randall, had been invited, and this was the evening when “event
number six, in the free-for-all-catch-as-catch-can style of dancing
would be pulled off,” as Holly Cross remarked, when he was
preparing for it. It was about a week after Dr. Churchill had so taken
the wind out of the sails of Dutch Housenlager in the physics class,
and in the meanwhile life at the college had gone on much as usual.
The affair took place in the Fairview gymnasium, which was
appropriately decorated for the purpose. Tom and his three chums—
for Frank Simpson went with them—had called for Miss Tyler and her
friends, Ruth and Mabel. Frank was to escort a new girl, Miss Helen
Warden, to the dance.
“You’re a little late,” chided Ruth, as she greeted her brother and
the others.
“It was Sid’s fault,” asserted Phil, with a wink at Tom. “He would
insist on changing his togs at the last minute.”
“And the hairdresser disappointed him, and he had to curl it
himself,” put in Tom.
“You—you——” spluttered Sid, and then he choked back his
justifiable wrath.
“Don’t mind them,” sympathized Mabel Harrison. “We know some
secrets as well as they, Sid.”
“Oh, I’ll get back at ’em some time,” predicted the stocky half-
back.
There was quite a throng at the dance when our friends arrived,
and shortly after the girls came from the dressing rooms, the
orchestra began a dreamy waltz. The lads led out their partners, and
the gymnasium presented a brilliant and animated scene.
70.
“Did you seehim?” called Tom to Phil, as the two young men and
their pretty partners swung near each other in the middle of the big
waxed floor.
“Who?” asked Phil, slowing up.
“Langridge,” was the reply, and then they were too far apart for
more conversation.
“Oh, dear, did he come?” asked Ruth of Tom, and she seemed
distressed. “I do hope he and Phil——”
“No danger,” interrupted Tom. “We’ll keep clear of him. What girl
has he?”
“I can’t imagine. I’ll look when I see him dancing with her.”
Tom pointed out his former enemy, as he swung his partner
around again, and Ruth exclaimed:
“Oh, she’s that new girl! Miss Rossmore is her name. I guess she
doesn’t know Mr. Langridge—very well.”
“Probably not,” agreed Tom, and then the dance came to an end
in a crash of melody. There was applause for an encore, and once
more the strains were taken up, and the youths and maidens were
treading the misty mazes of the waltz.
The custom prevailed at these fraternal society affairs of the lads
taking their partners’ dance programmes and filling the cards for
them. This was usually done in advance, and insured a girl plenty of
dancers with partners of whom her escort approved. For he would
only put down, or allow their owners to, the names of his own
friends. It was a sort of “clearing-house” of dances, and the lads
lobbied among themselves, and “split” numbers with each other at
their own sweet will, in order to “fill in.”
“I’ve got to get one more partner for you,” remarked Tom, when
the second half of the waltz had come to an end. “I’ll be back in a
moment,” and leading Ruth over to where her friends were seated,
Tom scurried off toward some of his chums, in order to impress one
71.
of them intoservice for his fair partner. There was one vacant waltz
on her card, and Tom himself had been booked for that number with
Miss Tyler.
“I want one for Miss Clinton,” called the pitcher, as he slid into the
group of his chums.
“Put me down!” exclaimed Jerry Jackson eagerly. “She’s one of the
best waltzers here. Put me down, Tom.”
“All right,” and Tom reached in his pocket for the card. It was not
there, and a puzzled look came over his face. “Jove, I must have lost
it!” he exclaimed blankly, as he looked back over the route he had
taken. As he did so he saw Garvey Gerhart approaching, holding out
one of the dance orders.
“I think you dropped this,” murmured the crony of Langridge. “I
just picked it up.”
“Thanks—very much,” exclaimed Tom, in relief, and taking the
card, he had the Jersey twin scribble his name on the only vacant
line.
“I put our friend Jerry down for you,” he explained to Ruth, as he
joined her.
“Thanks,” she murmured. “Oh, there’s that lovely two-step. I can’t
dance that enough!” and her little foot tapped the floor impatiently.
Tom led her out as the music welled forth.
All too soon it was nearing the end of the little affair, for, though it
was not late, the rules of Fairview forbade any extended festivities.
Tom, who had been dancing with Miss Harrison, was walking over to
claim Ruth for the next number, when he saw Langridge stepping
toward her.
“Confound him!” thought Tom, an angry flush mounting to his
face, “is he going to speak to her again?”
Such was evidently the intention of the former Randall bully. He
was smiling at Phil’s sister, who at first did not notice him. Langridge
72.
and Tom reachedher at about the same time, and what was our
hero’s surprise to hear his enemy say:
“I believe this is our dance, Miss Clinton?”
She turned in astonishment, a wave of color surging into her fair
face.
“Our dance—yours——” she stammered.
“I have your name down on my card,” went on Langridge calmly,
“and I believe if you will look at yours that you will find mine on it.”
Hastily Ruth caught up her dance order, which dangled from her
fan. As she scanned the names, the color of her face deepened.
“Why—why—it—it is here,” she murmured. “I did not know—Tom,
did you——”
“Most certainly not!” declared Tom, as emphatically as he could
without attracting too much attention. “I think you are mistaken, Mr.
Langridge,” he added stiffly. “I booked no dance for Miss Clinton with
you.”
“Perhaps you had better look at the card,” replied the bully,
sneeringly.
Tom gave it a hasty glance. There was no doubt of it. There, in
bold writing, on a line where he was sure he had scribbled his own
name, was that of Langridge. It was the last dance but two, and
Tom had the last one. He was also sure he had this one, and yet the
name of his enemy——
“There must be some mistake,” he said, in confusion, for
sometimes mistakes would occur in the indiscriminate trading of
cards among friends. “But I’m sure I never gave you that card to fill
out, Mr. Langridge.”
The bully shrugged his shoulders.
“I don’t know that you figure in this at all,” he said, with a
sneering air. “I have this dance with Miss Clinton. May I have the
73.
honor?” and hebowed gracefully to the confused girl, and held out
his arm.
“I—I don’t——” she began, in distress.
“This is not your dance,” declared Tom, glaring at Langridge,
reaching out his hand toward his own partner.
The rivals faced each other. Rivals again, though on a different
field than the baseball diamond. An angry light gleamed in Tom’s
eyes—on the face of Langridge there was a supercilious sneer. They
stood thus, at one side of the ballroom floor. The music was playing
softly, and some were dancing, but the impending scene between
Tom and Langridge was attracting attention.
Ruth realized it, and was very much distressed. Tom was
determined not to give way, but he realized that to make further
claim against Langridge would have the effect of causing a most
unpleasant affair. He felt that there was something wrong
somewhere.
It was Frank Simpson who saved the day. The big Californian had
seen at a distance what took place, and had guessed what was
going on. Also he had overheard a little of the conversation, and he
was able to fill in the rest.
He sauntered slowly up to the trio, and, with an air of good
fellowship, which he assumed for the occasion, he clapped Langridge
lightly on the back.
“Hello, old man!” he exclaimed. “We’ll meet soon on the gridiron, I
hope.”
“Yes,” answered Langridge stiffly, turning aside. “Miss Clinton, will
you——” He paused suggestively.
“No!” whispered Tom. “Your name never got on her card right.”
“Take care!” almost hissed Langridge.
“No, it is you who must take care!” broke in Simpson, leaning
forward as if he was talking on ordinary topics to the three. The
74.
crowd saw, andtaking the very view of the little gathering that the
big Californian wished them to, they turned aside. “It is you who
must take care, Mr. Langridge,” went on Frank. “I saw you write your
name on Miss Clinton’s card.”
“What!” The bully’s eyes blazed.
“Easy now,” cautioned Simpson, in calm tones. “Tom, you dropped
your partner’s card a while ago, didn’t you?”
“Yes!” The end was beginning to understand now.
“I happened to be standing behind a pillar,” went on Frank, “when
I saw Langridge pick it up. I saw him erase a name and substitute
another, but I thought nothing of it at the time, as lots of the fellows
had girls’ cards, filling them out. Then I saw Mr. Langridge hand the
dance order to a friend of his, who started toward you with it, Tom,
just as you discovered your loss.”
“Gerhart—he handed it to me!” gasped Tom. “I see now!
Langridge, you——”
“He tried to play a sneaking trick, and was caught at it!” broke in
Simpson. “Now, Mr. Langridge, I’d advise you to leave this dance!”
and the voice of the big Californian grew stern as he looked full into
the eyes of Langridge.
Without a word, but with a glance of hate at Tom, the bully swung
around and crossed the room, threading his way amid the dancers.
“Thanks, old man!” exclaimed Tom, fervently, to Frank. “You save
us—saved Miss Clinton—an unpleasant time.”
“Indeed you did,” spoke Ruth, holding out her little hand. “I don’t
know how I can repay you. I did not look at my card when Tom
handed it back to me, but when I saw—saw that name there, I—I
knew I had never let him put it down.”
“Here!” exclaimed Tom, taking the order. He scratched out the
offending name. “It’s gone now,” he added, with a laugh.
“I am in your debt, Mr. Simpson,” went on Ruth.
75.
“Then repay mesometime by saving a dance for me,” spoke the
lad from the Golden West, as he bowed and moved away.
“I think this is our dance—now!” spoke Tom, with a smile.
“Oh—Tom!” exclaimed the girl, “I—I think I’d rather sit it out.”
76.
CHAPTER XXVIII
THE LEGALBATTLE
Langridge left the gymnasium immediately after the unpleasant
scene, and Gerhart soon followed. In a manner, the evening had
been partly spoiled for Ruth, but her girl chums gathered around her,
and succeeded in bringing back a smile to her face.
She and Tom “sat out” the dance over which there had been a
dispute, and in a palm bower they talked of many things. Miss
Clinton begged off from her partner in next to the last dance, but
she did the closing number with Tom, who wished that the music
would never cease.
But the dance finally came to an end with a crash of melody, and
though the youths and maidens applauded vigorously, the tired
musicians put away their instruments and departed.
“Well, it’s over,” spoke Tom, regretfully, as he escorted his fair
companion toward the dressing room.
“Yes, but it was—glorious while it lasted!” she exclaimed, with
brightly sparkling eyes. She was herself again.
“When is the next one?” he asked, eagerly.
“Oh, you greedy boy!” she cried. “I’ll let you know, however. We
can’t have them too often. The ogress objected to this one, as it
was.”
“Meaning Miss Philock?” asked Tom.
“No one else. I’ll be out soon, and then we’ll go home. There are
Madge and Mabel.”
77.
Tom and hisfriends went to have a final cup of coffee, before
starting off with the girls, and while they were drinking the
beverage, Frank Simpson remarked:
“Well, we ought to know this week whether we’re going to have a
Randall College any more or not.”
“How so?” asked Phil.
“The real legal battle opens in court to-morrow. I heard Dr.
Churchill telling Mr. Zane about it this afternoon. It seems there is a
certain point to be argued before they get at the main issue, and
whichever side wins this point will have the advantage, and
practically get the case.”
“What sort of a point is it?” asked Tom, who had a little leaning
toward the law.
“Blessed if I know?” replied the Californian. “It was too deep for
me, though I heard Moses mention it. There was something about a
writ of certiorari or lis pendis or an injunction, or something like
that.”
“Maybe the college authorities are going to ask for an injunction to
prevent Langridge and that crowd from interfering until the football
season is over,” suggested Holly Cross, hopefully.
“What? Do you imagine that all Moses and the others have to
think of is football?” demanded Phil. “I tell you, fellows, this is a
serious matter. I’d hate to see old Randall done away with.”
“So would we all,” declared Kindlings. “But maybe we’ll win in
court, just as——”
“As we didn’t against Fairview, but as we’re going to do against
Boxer Hall!” interrupted Tom, with energy, and then he saw Ruth
beckoning to him, as she stood with her chums, most bewitchingly
arrayed in a fur coat. “Come on!” called Tom to his friends, and soon
they were escorting the girls home.
78.
Welcome to ourwebsite – the perfect destination for book lovers and
knowledge seekers. We believe that every book holds a new world,
offering opportunities for learning, discovery, and personal growth.
That’s why we are dedicated to bringing you a diverse collection of
books, ranging from classic literature and specialized publications to
self-development guides and children's books.
More than just a book-buying platform, we strive to be a bridge
connecting you with timeless cultural and intellectual values. With an
elegant, user-friendly interface and a smart search system, you can
quickly find the books that best suit your interests. Additionally,
our special promotions and home delivery services help you save time
and fully enjoy the joy of reading.
Join us on a journey of knowledge exploration, passion nurturing, and
personal growth every day!
ebookbell.com