iPhone Human Interface Guidelines

1 Oct 2007 - 9:07am
6 years ago
6 replies
2719 reads
Jeff Stevenson
2007

I thought I'd bring this to the attention of the group, in case you haven't
already seen it. Apple has published an iPhone Human Interface Guidelines
document. You can see it here:
http://developer.apple.com/documentation/iPhone/Conceptual/iPhoneHIG/

I only skimmed through it, but I didn't see too much that was
groundbreaking. At the very least, if you're an iPhone web designer, it will
probably save you many hours of trial and error.

Let me recommend, though, that you skip to this section:
iPhone HIG > Metrics, Layout Guidelines, and Tips > Be Aware of Default
Control Styles

You'll find a page that describes a "multiple select element". It looks like
a drop-down list, except I guess you can select more than one option. I
haven't used an iPhone long enough to encounter one of these in the wild,
but it seems pretty cool. In some cases, it could save a ton of space by
replacing a long list of checkboxes. Can anyone who has used this widget
before comment on its usefulness?

Jeff Stevenson

Comments

1 Oct 2007 - 9:31am
Alexander Baxevanis
2007

One thing that strikes me about these guidelines is that they don't seem
future-proof at all. They contain things such as:

"The size of the area behind the rounded rectangles is 320 pixels wide and
356 pixels high and its background fill color is R = 197, G = 204, B = 211."

Does Apple never anticipate to change their screen resolution or colour
scheme?

I don't have anything against web-applications on the iPhone per se. But if
Apple would like to help people make good web apps, shouldn't they maintain
and publish some web UI library that could be adaptable to their future
phones? Hardcoded pixel-based layouts is so 90s :)

Alex

On 10/1/07, Jeff Stevenson <jeff.a.stevenson at gmail.com> wrote:
>
> I thought I'd bring this to the attention of the group, in case you
> haven't
> already seen it. Apple has published an iPhone Human Interface Guidelines
> document. You can see it here:
> http://developer.apple.com/documentation/iPhone/Conceptual/iPhoneHIG/
>
> I only skimmed through it, but I didn't see too much that was
> groundbreaking. At the very least, if you're an iPhone web designer, it
> will
> probably save you many hours of trial and error.
>
> Let me recommend, though, that you skip to this section:
> iPhone HIG > Metrics, Layout Guidelines, and Tips > Be Aware of Default
> Control Styles
>
> You'll find a page that describes a "multiple select element". It looks
> like
> a drop-down list, except I guess you can select more than one option. I
> haven't used an iPhone long enough to encounter one of these in the wild,
> but it seems pretty cool. In some cases, it could save a ton of space by
> replacing a long list of checkboxes. Can anyone who has used this widget
> before comment on its usefulness?
>
> Jeff Stevenson
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://beta.ixda.org/guidelines
> List Help .................. http://beta.ixda.org/help
> Unsubscribe ................ http://beta.ixda.org/unsubscribe
> Questions .................. list at ixda.org
> Home ....................... http://beta.ixda.org
>

1 Oct 2007 - 11:01am
Jeffrey D. Gimzek
2007

On Oct 1, 2007, at 7:07 AM, Jeff Stevenson wrote:

> You'll find a page that describes a "multiple select element". It
> looks like
> a drop-down list, except I guess you can select more than one
> option. I
> haven't used an iPhone long enough to encounter one of these in the
> wild,
> but it seems pretty cool. In some cases, it could save a ton of
> space by
> replacing a long list of checkboxes. Can anyone who has used this
> widget
> before comment on its usefulness?

google uses this in their new - hard to believe - recipe search thing.

see:

<http://tinyurl.com/2ox7xw>

click any "drop down" menu

i think this is wonderful space saver - we're thinking of rolling it
out for search narrowing in our new product.

jd

--

Jeffrey D. Gimzek
Digital Experience Designer

www.jdgimzek.com

1 Oct 2007 - 11:57am
Gunnar Liljas
2007

A rather nice solution, I agree. It felt a bit awkward to use, though.

- OK, I've checked these checkboxes. Now what? Ah...click outside or
click the "Enter" button...

This "problem" was actually solved in good ol' AmigaOS. Since all menus,
both application menus and context menus, required a right
click-and-hold, the left click could be used to check multiple items,
while remaining in the open menu.

/G

Jeffrey D. Gimzek wrote:
>
> google uses this in their new - hard to believe - recipe search thing.
>
> see:
>
> <http://tinyurl.com/2ox7xw>
>
> click any "drop down" menu
>
> i think this is wonderful space saver - we're thinking of rolling it
> out for search narrowing in our new product.
>
> jd
>
>
>
>
> --
>
> Jeffrey D. Gimzek
> Digital Experience Designer
>
> www.jdgimzek.com
>
>
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://beta.ixda.org/guidelines
> List Help .................. http://beta.ixda.org/help
> Unsubscribe ................ http://beta.ixda.org/unsubscribe
> Questions .................. list at ixda.org
> Home ....................... http://beta.ixda.org
>
>
>
>

--
________________________________
LEON

Gunnar Liljas
Software Architect
Tel: 46-(0)11 - 36 28 59
Fax: 46-(0)11 - 36 28 60
gunnar at leon.se <mailto:gunnar at leon.se>
www.leon.se <http://www.leon.se>

1 Oct 2007 - 2:44pm
david gee
2004

On Oct 1, 2007, at 7:07 AM, Jeff Stevenson wrote:
>> You'll find a page that describes a "multiple select element". It
>> looks like
>> a drop-down list, except I guess you can select more than one
>> option.
The <select multiple> element has been around since at least HTML 3.2,
possibly longer. For as long as I can remember, it's universally been
considered a usability nightmare - if you have any significant number of
items checked, it's very difficult to quickly determine what is and what
isn't selected. The default HTML implementation of the multiple select
widget also requires Ctrl or Shift clicking to select multiple items.
But then again...

Jeffrey D. Gimzek wrote:
> google uses this in their new - hard to believe - recipe search thing.
>
> see:
>
> <http://tinyurl.com/2ox7xw>
>
>
I guess once Google and Apple do anything, usability concerns magically
disappear. To be fair, Google's implementation is different - this is a
Javascript pull-down menu cleverly disguised to look like a select
element. It's a bit better, as they use checkboxes in place of
ctrl/shift clicking, but there's still no at-a-glance way to see what's
selected under that pulldown. They've done the best they could by
setting the mouseover tooltip to show everything that's selected. Still,
I'd never use this method for more than 10 options.

david gee

1 Oct 2007 - 6:29pm
Joe Lanman
2007

What about having a layout like:

Main ingredients:
[select]

clicking [select] and choosing more than one option would result in:

Main ingredients:
chicken x
tomatoes x
pasta x
[select]

Selected options could be removed by clicking the x.

This would push following content further down the page, but would make
selections clearer.

On 01/10/2007, David Gee <david at mode3.com> wrote:
>
> On Oct 1, 2007, at 7:07 AM, Jeff Stevenson wrote:
> >> You'll find a page that describes a "multiple select element". It
> >> looks like
> >> a drop-down list, except I guess you can select more than one
> >> option.
> The <select multiple> element has been around since at least HTML 3.2,
> possibly longer. For as long as I can remember, it's universally been
> considered a usability nightmare - if you have any significant number of
> items checked, it's very difficult to quickly determine what is and what
> isn't selected. The default HTML implementation of the multiple select
> widget also requires Ctrl or Shift clicking to select multiple items.
> But then again...
>
> Jeffrey D. Gimzek wrote:
> > google uses this in their new - hard to believe - recipe search thing.
> >
> > see:
> >
> > <http://tinyurl.com/2ox7xw>
> >
> >
> I guess once Google and Apple do anything, usability concerns magically
> disappear. To be fair, Google's implementation is different - this is a
> Javascript pull-down menu cleverly disguised to look like a select
> element. It's a bit better, as they use checkboxes in place of
> ctrl/shift clicking, but there's still no at-a-glance way to see what's
> selected under that pulldown. They've done the best they could by
> setting the mouseover tooltip to show everything that's selected. Still,
> I'd never use this method for more than 10 options.
>
> david gee
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://beta.ixda.org/guidelines
> List Help .................. http://beta.ixda.org/help
> Unsubscribe ................ http://beta.ixda.org/unsubscribe
> Questions .................. list at ixda.org
> Home ....................... http://beta.ixda.org
>

1 Oct 2007 - 6:51pm
Jeffrey D. Gimzek
2007

you could also have a summary of selections in total under the
controls that was updated dynamically - sort of a 'selections bread
crumb'.

>> I guess once Google and Apple do anything, usability concerns
>> magically
>> disappear.

well, at least they dont seem to be going broke from alienating users
with poor experiences.

;)

(but then again, sans facetiousness, neither is Microsoft)

jd

On Oct 1, 2007, at 4:29 PM, Joe Lanman wrote:

> What about having a layout like:
>
>
> Main ingredients:
> [select]
>
>
> clicking [select] and choosing more than one option would result in:
>
>
> Main ingredients:
> chicken x
> tomatoes x
> pasta x
> [select]
>
>
> Selected options could be removed by clicking the x.
>
> This would push following content further down the page, but would
> make
> selections clearer.
>
>
>
> On 01/10/2007, David Gee <david at mode3.com> wrote:
>>
>> On Oct 1, 2007, at 7:07 AM, Jeff Stevenson wrote:
>>>> You'll find a page that describes a "multiple select element". It
>>>> looks like
>>>> a drop-down list, except I guess you can select more than one
>>>> option.
>> The <select multiple> element has been around since at least HTML
>> 3.2,
>> possibly longer. For as long as I can remember, it's universally been
>> considered a usability nightmare - if you have any significant
>> number of
>> items checked, it's very difficult to quickly determine what is
>> and what
>> isn't selected. The default HTML implementation of the multiple
>> select
>> widget also requires Ctrl or Shift clicking to select multiple items.
>> But then again...
>>
>> Jeffrey D. Gimzek wrote:
>>> google uses this in their new - hard to believe - recipe search
>>> thing.
>>>
>>> see:
>>>
>>> <http://tinyurl.com/2ox7xw>
>>>
>>>
>> I guess once Google and Apple do anything, usability concerns
>> magically
>> disappear. To be fair, Google's implementation is different - this
>> is a
>> Javascript pull-down menu cleverly disguised to look like a select
>> element. It's a bit better, as they use checkboxes in place of
>> ctrl/shift clicking, but there's still no at-a-glance way to see
>> what's
>> selected under that pulldown. They've done the best they could by
>> setting the mouseover tooltip to show everything that's selected.
>> Still,
>> I'd never use this method for more than 10 options.

--

Jeffrey D. Gimzek
Digital Experience Designer

www.jdgimzek.com
thundercougarfalconbird.blogspot.com

Syndicate content Get the feed