よりアプリらしさを出すために

Slide 1

Slide 1 text

「このアプリ、アプリっぽい！！！」よりアプリらしさを出すためにおしん(@38Punkd)

Slide 2

Slide 2 text

前提 01

Slide 3

Slide 3 text

前提これから話すことは、あくまでモバイルアプリというハードウェアとその利用用途から考えた時に最適ではないUIUXがあるという話であって、モバイルの方がWebよりも優れているという話ではないですモバイルもWebも、それぞれに長所短所がありますモバイルアプリの長所を最大限活かす上で「もっと改善できる」点を話していきます

Slide 4

Slide 4 text

『このアプリ、使いにくいな』と思ったことはありませんか？『このアプリ、 Webっぽいな』

Slide 5

Slide 5 text

理由があるんです

Slide 6

Slide 6 text

・画面が大きい・座って操作パソコンスマホ・画面が小さい・移動時に操作

Slide 7

Slide 7 text

・網羅性・閲覧性・画面が大きい・座って操作パソコンスマホ・画面が小さい・移動時に操作

Slide 8

Slide 8 text

・簡便性・即効性・網羅性・閲覧性・画面が大きい・座って操作パソコンスマホ・画面が小さい・移動時に操作

Slide 9

Slide 9 text

モバイルアプリケーション Webアプリケーション

Slide 10

Slide 10 text

・簡便性・即効性・網羅性・閲覧性・画面が大きい・座って操作モバイルアプリケーション Webアプリケーションパソコンスマホ・画面が小さい・移動時に操作

Slide 11

Slide 11 text

・簡便性・即効性モバイルアプリケーションスマホ・画面が小さい・移動時に操作モバイルアプリの「体験」には繰り返し行う行為 (=Task)を素早く楽に操作できることが求められる

Slide 12

Slide 12 text

『このアプリ、使いにくいな』と思ったことはありませんか？『このアプリ、 Webっぽいな』

Slide 13

Slide 13 text

『このアプリ、使いにくいな』と思ったことはありませんか？『このアプリ、 Webっぽいな』繰り返し行う行為 (=Task)を素早く楽に操作でき ...ない！！！

Slide 14

Slide 14 text

素早く楽な操作を実現するための方法・アクセシビリティ・ユーザビリティ https://developer.apple.com/design/human-interface-guidelines/accessibility

Slide 15

Slide 15 text

・アクセシビリティ　・Interactions 　　・Gesture 　　・Buttons and controls 　　・... 　・VoiceOver 　　・... 　・Text Display 　・Color an effects 素早く楽な操作を実現するための方法 https://developer.apple.com/design/human-interface-guidelines/accessibility

Slide 16

Slide 16 text

素早く楽に操作を実現するための『画面遷移』 02

Slide 17

Slide 17 text

画面遷移

Slide 18

Slide 18 text

画面遷移

Slide 19

Slide 19 text

画面遷移

Slide 20

Slide 20 text

画面遷移・スワイプバック・戻るボタン

Slide 21

Slide 21 text

画面遷移投稿の一覧 (≒タイムライン ) →投稿の詳細という階層が存在

Slide 22

Slide 22 text

画面遷移投稿の一覧 (≒タイムライン ) →投稿の詳細という階層が存在ユーザーはこの操作を繰り返し行っているユーザーにとって自然な流れは一覧→詳細の前後関係が存在していること

Slide 23

Slide 23 text

Before

Slide 24

Slide 24 text

Before

Slide 25

Slide 25 text

Before

Slide 26

Slide 26 text

Before

Slide 27

Slide 27 text

Before ？？？

Slide 28

Slide 28 text

After

Slide 29

Slide 29 text

After

Slide 30

Slide 30 text

After

Slide 31

Slide 31 text

After

Slide 32

Slide 32 text

After

Slide 33

Slide 33 text

🥳

Slide 34

Slide 34 text

素早く楽に操作を実現するための『タブバー』 03

Slide 35

Slide 35 text

Before

Slide 36

Slide 36 text

Before

Slide 37

Slide 37 text

Before

Slide 38

Slide 38 text

After

Slide 39

Slide 39 text

After

Slide 40

Slide 40 text

After

Slide 41

Slide 41 text

After

Slide 42

Slide 42 text

最後に 04

Slide 43

Slide 43 text

「アプリっぽい」「アプリっぽくない」と感じる嗅覚はだいじメッセージ原因になっているUIUXを一つずつ改善していくことでアプリらしさが増していく

Slide 44

Slide 44 text

ありがとうございました！