The influence of app screenshot on the formation of aesthetic impression

The influence of app screenshoton the formation of aesthetic impression

- Focusing on the iOS -

Minsoo Byun, Kwangil Ju, Junho Choi

© Content UX Lab., Yonsei University, 2013

Digital Cultural Content/UX Track,Graduate School of Information,

Yonsei University, Seoul, Rep. of Korea

ConclusionResultsResearch DesignBackgroundIntroduction

The influence of app screenshoton the formation of aesthetic impression

- Focusing on the iOS -


The issues of app screenshots

App scam (e.g. Minecraft)

Icon

Screenshot


App Scam YouTube Video Capture

Apple’s new policy for preventing app scam

It is extremely important to design the first screenshot of an app because users now download & purchase the app based on visual impression, not on details & textual descriptions.


KTH Mobile Report (2012. 1Q)

Younger generation likes image information better than texts

Paid

/Fre

e

Dow

nloa

ds

Rev

iew

Ran

king

Des

crip

tion

Scre

ensh

ot

Rat

ing

Title

Icon

Dev

elop

er

3 factors of Android app installation (by age)10’s 20’s 30’s 40’s 50’s +

Rev

iew

Ran

king

Scre

ensh

ot

Rat

ing

Des

crip

tion

Title

Icon

Dev

elop

er

3 factors of iOS app installation (by age)

10’s 20’s 30’s 40’s 50’s +

Paid

/Fre

e



Desktop (iOS) Desktop (Android)

iPhone 4 (iOS) Nexus S (Android)

How they look like on the screen (e.g. Facebook)

Why is it important?


675,000 apps on Google Play (2012.09)

775,000 apps to iOS devices (2013.01)

300,000 native iPad apps (2013.01)

App Discovery

A plenty of apps


• • • 2011 • • • • • • • • • • • • 2012 • • • • • • • • • • • • 2013 • • •

[iOS 5: Sorting Page] a table view

4-5 apps only icons

vertical listing

[App Detail Page] text-based unadorned

informational

[iOS 6: Sorting Page] a card view only 1 app

primary screenshot horizontal listing

[App Detail Page] screenshot-centered

beautifying promotional

Apple acquired app discovery startupApp screenshots have become crucial in people’s purchasing decision in the app market these days.


Overview of this study


visual impression of app screenshotTheme

20’s mainlyParticipants

iOS Apple iTune App StoreFocus

but only in some dictionaries.

It is hard to find any clear definition of

‘app screenshot’in academic research


Literature review

Main Entry: screen·shotPronunciation: \ˈskrēn-ˌshät\Function: nounDate: 1983

A screen dump, screen capture (or screen-cap), screenshot (or screen shot), screengrab (or screen grab), or print screen is an image taken by the computer user to record the visible items displayed on the monitor, television, or another visual output device. (omitted) Screenshots can be used to demonstrate a program, a particular problem a user might be having, or generally when display output needs to be shown to others or archived.

A frame of television or video footage that is digitized and stored as a still image for subsequent display, editing, or printing.

Definition of Screenshot


The first screenshot that you upload is the first screenshot that appears on your app product page on the App Store and the device App Store when viewed from the iPhone and iPod touch. Up to four additional optional screenshots can be uploaded. All subsequent screenshots will appear in numbered order on the App Store, in the same order in which they were uploaded in iTunes Connect. Only Newsstand apps can reorder their screenshots after they have been uploaded.

The different graphic assets we request are used to highlight and promote your application in Google Play, and possibly other Google-owned properties. If you’d like to restrict the marketing of your app to just Google Play, you have the option of opting-out of marketing by selecting the "Marketing Opt-Out" in the Developer Console.

Screenshots (Required):

- We require 2 screenshots.- You may upload up to 8 screenshots. (omitted)

Show off unique and engaging parts of your app, and demonstrate how the app is social. Don't use images that are unrelated, misleading, or dramatically different from what most users experience. Screenshot should not contain marketing copy, bulleted lists of features or calls to action e.g. "Click here to play the game!". Websites with Facebook Login must include at least one screenshot indicating a personalized user experience.

App Screenshot Guidelines


https://developers.facebook.com/docs/guides/web/

https://developers.facebook.com/docs/guides/web/

‘App screenshot’ is an image displayed by the app developers to highlight the visible features on the screen.

It can be used to demonstrate an app’s key features and interface design in the app market.

It is a window of promotion to get user’s attention.

Operational Definition of App Screenshot


retouch

description

GUIgraphic

effect

text


Classification of App Screenshot

Screenshot(Mobile)

Website(Desktop)

Neil, Barrett, Advertising on the internet, Kogan Page

GUI

description

retouch

Screenshot(Mobile)

Neil, Barrett, Advertising on the internet, Kogan Page


Classification of App Screenshot

Combinations: SCREENSHOT (UI) x TEXT (description) x EFFECT (distortion)


Graphic UI(original screenshot)

Texts

effects

Atype

6 Types of App Screenshots

Btype C

type

Dtype

Etype

Ftype

* Apple iTunes App Store (Korean market)


6 Types of App Screenshots: Treatments (A, B, C)

pure screenshotA

type

screenshot+

highlighting(e.g. loupe effect)

Btype

effect

screenshot+

instructionCtype

text


6 Types of App Screenshots: Treatments

screenshot+

text+

effect

= complex

Ftype

screenshot+

text+

effect(character)

Dtype

text

screenshot+

text+

effect(panoramic)

Etype

text

2ndscreenshot

3rdscreenshot

(D, E, F)

vocabulary (5 pairs)vocabulary (5 pairs)vocabulary (5 pairs)

1static

(정적인)dynamic(동적인)

2simple(단순한)

varied(복잡한)

3rich

(화려한)plain

(수수한)

4detailed(정교한)

disorganized(허술한)

5bright

(가벼운)dark

(무거운)


Emotional vocabulary analysis by Semantic Differential Method

voca. sub vocabulary기쁜 명랑한, 발랄한, 재미있는, 경쾌한깨끗한 가벼운, 깔끔한, 맑은, 밝은, 섬세한, 여성적인온화한 매끄러운, 소박한, 수수한, 인상적인, 촉촉한귀여운 싱그러운, 아기자기한, 즐거운내추럴한 감미로운, 감성적인, 달콤한, 자연적인, 향기로운은은한 그윽한, 정돈된, 정적인, 조용한, 심플한우아한 고급스러운, 동양적인, 멋진, 세련된, 품위 있는화려한 다양한, 매력적인 장식적인, 성숙한, 풍성한점잖은 견실한, 부수적인, 고전적인, 중후한고상한 지적인, 차분한, 분위기 있는모던한 견고한, 세련된, 진보적인, 도시적인, 현대적인싫어함 불안정한, 불편한, 어색한, 답답한거칠은 딱딱한, 오돌토돌한, 불쾌한, 반투명한부드러운 매끄러운, 매혹적인, 평온한, 잔잔한

* Self Assessment Manikins / Likert scale (7)* References: HCI Introduction (Jinwoo Kim) and other studies using S.D. method Jungsun Yoon(2000), Hyesuk Park, Jungsuk Yoon(2001), Kyungsuk Kim, Yeonsuk Lee(2004),

Sujin Park, Woohyun Jung, Jaehyun Hahn, Sujin Shin(2004), Saebom Kim(2007), Hyunwon Jung(2008), Jongmoo Kim, Sunghoon Kim(2009)


Focus Group Interview

- Goal to find out insights from the survey in detail

- Groups

- What we did pre-interview informed consent collect personal information semi-structured in-depth interview post-discussion

iOS useriOS user Android userAndroid usergender M F M Fnumber 1 1 1 1

sum 4444


1 2 3 4 5 6 7

Rich

Simple

Bright

Calm

Detailed

Dark

Plain

Varied

Disorganized

Dynamic

Results

A-Type B-Type C-Type D-Type E-Type F-Type


Results: Case 1Case of original and highly retouched screenshots (no vs. strong retouching)

1 2 3 4 5 6 7

Rich

Simple

Bright

Calm

Detailed

Dark

Plain

Varied

Disorganized

Dynamic

Atype

Ftype

App market consumers perceive different impressionsbetween A-Type(plain original) and F-Type(highly retouched images).


Results: Case 2

Rich

Simple

Bright

Calm

Detailed

Dark

Plain

Varied

Disorganized

Dynamic1 2 3 4 5 6 7

Case of moderately vs. strongly retouched screenshots

Ctype

Dtype

Consumers hardly perceived different impressions between plain screenshots(C-Type, D-Type) and somewhat strongly retouched images


Results: FGI

“Visual look and feel of app screenshots are important. However, I have expectation about apps when I look at some app screenshots. because I want to know its function and usefulness from the screenshots. So I think the most important thing is the ability to check out the original interfaces at first.

“Too many information in them, very confused so I don’t know what this app can do. Terrible.”

“Sometimes it looks good because I can see something more visualized infos than just captured image. Noise is much better.”

“In this case, I hate the font they use. And it looks like old-fashioned app so I can’t even feel any attractive emotion. Just creaky.”

“In this case, texts are not crucial elements for understanding its function. Plus, font size is too small so bad readability.”

“It looks, I don’t know but I can understand what it looks like. Not any more.”

“It looks good because of using color of them. Sky blue and yellow look more friendly and comfortable. But I don’t want to download it we have lots of similar apps!”

“Usually I like characters so these screenshots make me positive and happy.

“I don’t understand its layout, if I were designer, I would get rid of the devices but full capture images. Oh, I didn’t recognize the texts on it.”

The factors of making differences visual impressions of app screenshots arecolor, layout, font, quality of image


Implications

- Most App market consumers want to check out the original interface by browsing the app screenshots before they download on the market

- For promoting an app effectively, it is better to design the Graphic User Interfaces(GUI) than fancy app screenshots


Further Study

- The more samples are needed for the future research

- This study sample is 20’s, so we will collect more data from the other age groups

- Further study will include user’s background and usage patterns because artists and designers have the knowledge of aesthetics.

- We focused only on Apple’s iTunes App Store, so next step will be comparing iOS with Android

- Those 9 type of app screenshots were collected in all categories. We are going to investigate the genre effect of different app categories.

Q&A

The influence of app screenshot on the formation of aesthetic impression

Documents

app detail

app store

sorting page

kogan page

app screenshots

app screenshoton

app market

conclusionresultsresearch