Archive for the ‘Telephone’ Category

Mobile Ergonomics for those with two thumbs

Nov 09
23

Mobile Ergonomics

You can’t easily tap every region of the phone with equal ease. Your hand isn’t designed for this.  Yes your thumb is opposable but unless it’s double jointed there will still be parts of your phone that will be harder to tap.

When designing an application consider how it’s going to be held.  In one hand, sometimes in the other, perhaps in your pocket?  That’s why it’s so important to get the app out of the simulator and actually into your hand. The mechanics of how you hold your phone make it much harder to grip the device in certain orientations. It makes it particularly difficult to reach the lower corners by your thumb.

Consider the built in Camera application that Apple provides. The application is simple and attractive but the buttons for the application are in exactly the wrong place. To take a proper picture you need to hold the phone perfectly vertical (unless you’re taking a picture of the floor.)  The slippery edges of the phone require you to either grip the phone firmly with your hand making it difficult to tap the camera or alternatively balance the camera precariously on your pinkie finger.

iPhone Camera Interface Tap TargetsI have dropped my phone at least twice attempting this and know of at least one person who has smashed their phone into little bits because of this.

There’s a principal called “Fitts’s law” that describes how clickable items are on screen. Said simply:

Items that are larger and closer to the mouse cursor are easier to click.

The mathematical details then explain that traditional screen edges are infinitely click-able since they have a virtually unlimited size.   On a mobile device the same assumptions don’t hold true. The mechanics of your hand play a significant role.  Not only do items have to be larger to be easier to click but they have to be easily reachable when holding a phone in one hand.

Going Mobile – Giving users the finger

Apr 09
29

Last month I gave a talk for UPA Boston, this is a summary of that talk.

Over the last five years we’ve seen a shift in mobile applications.  For about 30 years people thought of mobile phones as an extension of traditional phones. They would make calls and that was the primary use. Over the last 10 years we’ve added features like voice mail, texting and even basic web browsing. It wasn’t until just the last 4-5 years that the next wave of mobile has taken off.

Mobile today

Mobile phones today are dominated by three classes of devices, 16 button, 60 button keyboard and new touch devices. There are about 1Billion 16 button phones, 50-100 million keyboard phones and about 20-40 million touchscreen phones. I’m mostly talking about this last category of emerging phones though some principals apply to both keyboard phones and 16 button phones.

The key difference between the phones of yesterday and the phones of today are a combined set of capabilities and technologies that fundamentally change the user experience. These include:

  • Always connected – email/web/etc
  • Adaptive input screen (control every pixel)
  • Geo-location
  • Touch/Gesture interface
  • Accelerometer
  • Apps you can download

A lot of these technologies existed either in isolation or in awkward implementations. Together they allow for a much richer application experience. This has become a platform that is fun, exciting and profitable for application developers.

Design for existing behaviors

When designing an application it’s key to keep scenarios in mind. A scenario is the basic story of how a person may use the application. The important thing when thinking about scenarios is that actions tend to stay the same but the way you complete those actions changes.  Behavioral changes are difficult and rare. It’s much easier to design tools that encourage and support existing behaviors. Similarly it’s much easier for end-users to adopt your application or tool into their existing behaviors rather then changing established patterns.

Designing for Mobile

When designing for mobile remember that people are out in the real world. Your application needs to be a good alternative to the desktop/laptop. The factors for this type of design should include:

  • Input methods – make it easy and minimal to get information into the device.
  • Form Factor – Design for a smaller screen size and make it easy to read and get information back out of the device.
  • Location – Take location into account
  • Efficiency – A mobile application should be quick and efficient
Input Considerations
You can’t always expect that the user has both hands free. People are often holding something else in their hand, coffee, bags, railings, doors, etc.  You should design your application to be usable with one hand. Consider scenarios where the user may have both hands occupied, driving, running, etc.
Opposable thumbs are great but they aren’t perfect. There are spots on the phone that are particularly hard to hit with one hand. Certain apps aren’t designed well for single handed use. Fitts law doesn’t work on mobile devices. Because of the mechanics of the human hand certain zones are easier to hit and this has little relation to the screen edge.
Output Data
Use large presentation size fonts, 14-18pt fonts are typical. Use large finger tip sized targets, 30-40px are easy to tap.  Small targets are particularly hard to hit. Examples: Info buttons are tiny and sliders tend to be particularly hard to tap.
Touch Screen Language
The user interface language is being defined now. The desktop conventions of click, double click, right click. These conventions don’t always hold on a mobile device. A whole new interface language is being developed in rather an ad-hoc way. Certain conventions are becoming more popular:
  • Tap – most similar to click
  • Tap & Hold – magnify, copy/paste, selection/make dragable
  • Swipe – scroll, secondary action/delete option
  • Pinch – Zoom
  • Shake – Undo/Refresh/Clear
Basic guidelines
1) Each screen should do one thing (well)
2) Minimize on-screen elements (quantity, not size)
3) Make things easy to tap
4) Avoid preferences
5) Design for the 80% case
The session covered other topics including Mobile Wireframe Design, Mobile Web Design. Mobile Usability, and Mobile Gaming. The variation of the talk will be given at this years Mini-UPA, an event put-on by Boston UPA.  If your company or organization is interested in hearing it first hand contact me for additional info.

Iphone Clipboard Concept for Cut, Copy, Paste

Jul 08
26

One of the current drawback of certain touch devices (Iphone) is it’s lack of copy/paste functionality. The difficultly in creating this functionality on a mobile device is that the interaction technique has to be non-intrucive to the core interface. 

Unlike a desktop application where you can toss commands into a menu the interaction model on a phone has to be more direct and gestural.  The copy/paste model I’m proposing tries to address some of these issues. 

When a user is viewing a core text area:

  1. They can scroll (tap + drag ).
  2. They can move the insertion pointer (tap)
  3. They can use the magnifier loupe to position the insertion pointer (tap+hold)
In my illustration you could activate additional copy/paste gestures:
  1. You can bring up the copy/paste pallet ( tap+tap near the insertion pointer)
  2. Once the panel is open you can mark a selection (tap+dragging) from the insertion point creates a selection. Similarly you could create a selection with two fingers marking both corners..
  3. When in copy/paste mode the keyboard is replaced by your recently cut/copied blocks of text or images.  You can tap a piece of text to insert it into your document 
Note: The tap+tap gesture is sometimes used in application to zoom however it is never used to zoom while editing text or viewing read-only text such as in emails or contact lists. 
Unfortunately at this point it’s not possible for third party application developers to write an extension such as this so it’s a concept sketch only at this point. 
P.S. Did you know we’re now developing and designing mobile apps?  Check out our latest design work for a new fitness startup focused on running. 

Application design for mobile phones

Jun 08
5

I love designing applications for mobile phones. It forces you to think about the essential features. Often times this is exactly the type of design you want on larger applications but it’s tougher to convince clients that the application gets better when you take away features. Many larger applications can learn from this.

  • Do one thing, do it well
  • Linear flow top-down
  • Purposeful word choice
  • Large fonts for readability
  • Keyboard accessibility
  • The details matter

A phone should be a phone

May 08
4

The key feature of a phone is to be able to place a call. This IP based phone fails at this task in a spectacular way. Not only was I unable to place a call using this phone but in the process it displayed a nice error messages telling me that it couldn’t render a web-page.

The problem arrises from the fact that most companies have a special code to dial outside the company. If you guessed “dial 9″ you guessed wrong, and so did I. No matter what I tried I couldn’t get an outside line. I couldn’t get a dial-by-name directory. I couldn’t get an operator and there was no help available.

Using Excell as a Call List

Apr 08
4

A while back I wrote a freeware Vonage call dialer that would work with the Vonage API and allow you to place calls. I created a small tool that would recognize callto: links and place phone calls through Vonage. The Callto link was originally used by NetMeeting, now not many people support it (Skype does) however it’s really powerfull.

Interestingly someone recently contacted me about using Vonage and Excell as a call list to contact prospects and make sales calls.
They had a spreadsheet of calls to make:

A B C D
Joe Smith 232-555-1212
Bob Adams 545-555-4534
Joe Schmo 212-555-8544

Using a little Excell magic you can place a call now link into the C column and easily go down the list making calls. The code to place in Cell C1 would be:
=HYPERLINK(CONCATENATE(“callto:”,A1),”Call Now”). The sales person who asked about this was really excited so hopefully this is usefull to others as well.

Other experiments.

  • You can use the same trick on Google Docs but the hyperlink function doesn’t seem to be implemented yet. The formula works but the hyperlink doesn’t show up when clicked.
  • If you create an HTML file for the iPhone you can do the same thing just change the link to be tel: instead of callto: and the file will allow you to have a call list from your mobile phone. Unfortunatly links in Excel spreadsheets don’t work on the iPhone so you do need to output as HTML. More info on the iPhone call links is here.

Phone Menu Mistakes

Jan 08
22
  • “Our menu items have changed so please listen carefully…” – Do they really think I memorized their menus?
  • “We are experiencing unusually high call volume” – … No. this happens to you all the time you just choose not to hire enough customer support people.
  • “Your call is very important to us” – If my call was important to you I wouldn’t be on hold.
  • “Please enter your account number followed by number sign” … So that we may process it and ask you for it again once you speak with a real person.
  • “Our department doesn’t handle that you need to speak with” … Someone else who will transfer you over and over untill you give up.
  • “Your call may be recorded for quality purposes.” … We’re recorded all of our calls but we still can’t figure out the quality problem.
  • Endless music with no indication of wait time… Would it kill you to tell me the expected time remaining or the number of people in the call line in front of me?
  • “You have pressed an invalid choice, goodbye.” … We don’t care about your business.

How about you, heard any phone menu mistakes lately?

iPhone Discoveries

Nov 07
24

Here are some tips tricks that I discovered about the iPhone that I didn’t know when I got the device. Some of these may be obvious some may be tricks you find useful. These are all things you can do without hacking your phone.

  1. Theres a little switch on the side above the volume buttons that puts the phone into vibrate mode. This seems like a duh’ now but I didn’t even notice this switch at first.
  2. When browsing a website if you scroll to the bottom of the page the address bar will go away. If you press your finger where the address bar used to be in the top 1/4 inch the page will scroll to the top. If you hit this accidentally it may seem like a bug but if you know it’s there it’s quite useful.
  3. When typing on the keyboard you can get certain special characters by holding down certain letters. For example hold down the A or E for accented A’s and E’s. This seems to be available for (E, Y, U, I, O, A, S, L, Z, C, N, ?, !)
  4. If you’re listening to music and lock the phone you can double click the home button and you’ll get basic controls for next song/previous song and volume even while the device is locked. Also the side buttons will control the volume when the device is locked.
  5. Mobile Safari has a ‘developer mode.’ Go into settings, safari and enable the developer mode. You’ll now get warnings and errors in safari as you visit pages. This is useful for debugging mobile web apps.
  6. If you’re browsing a site you can hold your finger down over a link to see the URL target.
  7. The phone will auto-recognize numbers that look like telephones and automatically link them to the phone function.
  8. You can use the ‘timer’ application to sleep your phone. If you’re listening to music and nodding off you can set the timer to turn off your iPod after a certain amount of time. Just change the “When the Timer Ends”option.
  9. If you have someone in your contact list that shows up in the ‘wrong’ place you can add a field to their contact info called ‘phonetic name’ so they will get sorted phonetically not by how their name is spelled. For example I have a bunch of restaurant under ‘food.’
  10. If your phone rings and you’re listening to music squeeze the headphone clicker once to answer and again to end the call.
  11. In the stock and weather app if you select the little Y! in the corner it’ll take you to the Yahoo page on that stock or city.
  12. You can get your AT&T monthly balance and remaining minutes texted to your phone. Go to settings, phone, AT&T Services and select either balance or view my minutes.

My phone is my digital wallet

Oct 07
12

I left my wallet at home today but I remembered my phone. That got me thinking. Why can’t my phone be my wallet? I have too much crap in my wallet. Credit cards, shopping cards, health cards, drivers license, social security info, etc, etc. I propose a new ID system that lives on your phone. Here’s a picture:

Your ID lives on your phone

The idea is to allow your physical cards to live in your digital world. Here are the main advantages:

  • Works on any device with a display (color or B&W) no need for bluetooth, RFID or other radios.
  • Each ID is independant so your privacy and security isn’t compromised. This isn’t a universal ID, each ID is seperate so your privacy is secure but since it is digital it’s easy to find the one you need
  • Cards can be read optically with existing bar-code scanners.
  • Cards can auto-expire so if someone steals your card they only have a set time to use it. So you don’t have to worry about using it on the internet.
  • Since each time you use it it’s unique it’s very difficult cryptographically to forge a card that’s valid.
  • Since it’s digital and has an internet connection if you loose your phone you could use a secure website to close off access to all your cards at once.
  • Use the ‘i’ to flip the card over and see the CCV code if needed.
  • If your phone does have bluetooth or RFID you could show on-screen prompts to confirm a purchase at a point of sale.
  • Since RFID and bluetooth aren’t the primary mechanism you can’t steal someones credit card wirelessly the way you can with other touch and tap cards.

Disadvantages:

  • Existing stores aren’t setup to read/swipe an optical card and may require updated hardware or software
  • You would need a seperate solution for cash. How do you deal with physical money?
  • Adding new cards to your digital wallet may be complex, idealy new cards could be emailed to you or snapped with a digital camera.
  • What do you do with cards that won’t go digital? Do you still need a wallet or do you just ignore those? State and local goverments are likely to drag their feet on digital liscenses, social security cards, passports and other similar goverment issue ID’s could hold such an idea back.

iTip – A Tip Calculator for the iPhone

Oct 07
2

UPDATE: We have a new and improved tip calculator. Get details and download the best iPhone tip calculator available.

Itip - Tip Calculator

Last night I coded up a simple tip-calculator for the iphone using the ‘web sdk.’ It’s very basic and allows you to easily calculate the tip and figure out how to split a bill between multiple people. It was mostly a learning exercise but it turns out to be somewhat useful. Add it to your bookmarks for easy access on the go.

  • The iphone uses a strange meta tag called a viewport to determine if content should be scaled.
  • You need to use the style default-width; and default-height to get the window to fill the screen.
  • If you give text fields special names like ‘zip’ you’ll get a number mode keyboard if you use ‘mobile’ you’ll get a telephone input keyboard. (no longer true)
  • Since the iphone has no text selection model there seems to be no way to move the text input cursor. I wanted to use the ‘telephone pad’ for all numeric input and then auto- place the decimal point into but I couldn’t get Safari to behave.
  • Webkit has some nice effects like rounded rectangles, shadows and more. Too bad it’s not part of all modern web browsers.
  • You can get the Address bar to disappear by placing an onload event on the body:
    onload=”setTimeout(function(){ window.scrollTo(0, 1);}, 1)”
    Note: This only seems to work if the window is large enough to scroll.
  • The EDGE network is slow enough without needing to load external files. Minimizing external calls to import CSS and Javascript and things will load faster, especially for one-page applications like this one.
  • Hope you like it. If you have tips for my tip-calculator leave comments.
UPDATE: We have a new and improved tip calculator. Get additional details and download the best iPhone tip calculator.