A Study on Icon Arrangement by Smartphone UsersMatthias Böhmer and Antonio KrügerUbiquitous Media Technologies LabDFKI GmbH // Saarland University

30y ago

evolution

today

today

today

How do people arrange their icons?

- Barreau and Nardi, 1995 [2]- Studies on file organization on stationary computers- People put icons to special places

- Shipman et al., 1995 [23]- People create implicit structures

when manipulating layouts

- Ravasio et al., 2004 [20]- People cluster documents by their types- People dedicate screen areas to different purposes

- Ziefle and Bay, 2004 [27]- People built mental models of their phone menus

Related work

Ravasio et al. 2004 [20]

Study

Study method

Quantitative data, e.g.- number of apps- number of folders- number of icons on page- x/y position of icons

Qualitative data- participants‘ experience levels- concepts of icon arrangement- participants labeled with

oncepts„most used apps first page, groups of apps 2nd space, then games“

„most-used items should be on the first page, otherwise I try to group items (e.g., news outlets together)“

...

1

2

Screenshot Study

grounded theory

majority rule

template matching

- 132 people have sent 1,486 screenshots- 22 women, 108 men, 2 unknown- 106 iPhone users, 26 Android users- Mean age was 28.3 years (SD 8.5)- 60.5% Germany, 11.4% USA, 4.5% UK

- We cleaned the data set- We removed „Jailbreaks“ and iPod touch- 127 participants in final data set

Characteristics of data set

Findings

5 concepts for arranging

Usage-based icon arrangement

Relatedness-based icon arrangement

Usability-based icon arrangement

Aesthetics-based icon arrangement

External concepts for icon arrangement

llll lllllllll

l ll l

ABC123...

=?

Example

„I try to checkerboard alternate colors [...] most icons are blue, so on my first page of icons it alternates between blue and brown and I try to keep that consistency“ (aesthetics-based)

Example

„I try to checkerboard alternate colors [...] most icons are blue, so on my first page of icons it alternates between blue and brown and I try to keep that consistency“ (aesthetics-based)

Co-occurrences of concepts(1) (2) (3) (4) (5)

(1) usage-based

(2) relatedness-based

(3) usability based

(4) aesthetic-based

(5) external concepts

62 % 28 % 6 % 2 % 4 %

28 % 60 % 6 % 3 % 3 %

6 % 6 % 9 % 2 % 0 %

2 % 3 % 2 % 5 % 0 %

4 % 3 % 0 % 0 % 9 %

- Usage-based and relatedness-based most used- Participants applied hybrid concepts

Impact of concept on layoutN

umbe

r of

app

icon

s on

1st

pag

e 20

15

10

5

0

Frequency12 10 8 6 4 2 0

Num

ber of app icons on 1st page

20

15

10

5

0

Frequency121086420

Not usage based-concept Usage-based concept

Seite 1

More app icons on first page when applying usage-based concept

* iP

hone

dat

a on

ly

More folder icons on first page when applying relatedness-based concept

Num

ber

of f

olde

r ic

ons

on 1

st p

age

14

12

10

8

6

4

2

0

Frequency25 20 15 10 5 0

Num

ber of folder icons on 1st page

14

12

10

8

6

4

2

0

Frequency2520151050

Relatedness-based conceptNot relatedness-based concept

Seite 1

Context-related folders

Locations (e.g. cities, countries)

Activities (e.g. shopping, watching TV, traveling)

Grouping of apps into folders

People cluster follow-up apps- Camera apps w/ photo editing apps - Shopping apps w/ payment apps

People cluster similar apps- Apps for sending text messages- Dictionaries- Music- Games

Android specific results

WidgetIcon

Rel

ativ

e y-

posi

tion

(0

: bot

tom

, 1: t

op) 1 ,00

,80

,60

,40

,20

,00

Seite 1

WidgetIcon

Rel

ativ

e y-

posi

tion

(0

: bot

tom

, 1: t

op) 1 ,00

,80

,60

,40

,20

,00

Seite 1

WidgetIcon

Rel

ativ

e y-

posi

tion

(0

: bot

tom

, 1: t

op) 1 ,00

,80

,60

,40

,20

,00

Seite 1

WidgetIcon

Rel

ativ

e y-

posi

tion

(0

: bot

tom

, 1: t

op) 1 ,00

,80

,60

,40

,20

,00

Seite 1

WidgetIcon

Rel

ativ

e y-

posi

tion

(0

: bot

tom

, 1: t

op) 1 ,00

,80

,60

,40

,20

,00

Seite 1

Difference in icons and widgets- People put app icons to bottom- People put widgets to top

Other specific reasons

- Have as few pages as possible for less browsing- One user tries to „put games in the back and

work apps to front, because it‘s a work iPhone“- Users have dedicated places for unused apps

- For apps that „are never used but might come in handy some day“

- „Land of misfit apps“- „Silly apps“

Discussion + Implications

Discussion

- Better support for icon arrangement required- Context-aware menus should use level of pages- Locations of app icons can be exploited

to infer information about applications

Model for design of launchers

- General model for the design of launcher menus: three zones that should fit to all users

most used apps clusters of related apps

„land of misfit apps“

Conclusion

- Study about icon arrangement on smartphones- Five concepts (most users apply concepts

based on usage frequency and app relatedness)

- Implications for the design of launcher menus (support, context awareness, common model)

- Data is available (see paper for URL)

Conclusion

ABC123...

=?llll lllllllll

l ll l

ABC123...

=?

llll lllllllll

l ll l

A Study on Icon Arrangement by Smartphone Users

Matthias Böhmermatthias.boehmer@dfki.dehttp://bit.ly/iconstudy

Five concepts (most users sort icons based on usage frequency and app relatedness)Implications for the design of launcher menus (support, context awareness, common model)

Thank you!

Computer from The Noun Project

Smartphone designed by James Fenton from The Noun Project

Sergi Delgado, from The Noun Project

Tyler Sall, from The Noun Project

Marcio Duarte, from The Noun ProjectLocation designed by John Caserta from The Noun Project