Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
施工管理アプリケーション UI設計の勘所3選
Search
ANDPAD inc
March 17, 2021
Design
0
2.4k
施工管理アプリケーション UI設計の勘所3選
2021/03/16 ANDPAD TechLive #6 建築業界DXを進めるプロダクトの開発プロセス
ANDPAD inc
March 17, 2021
Tweet
Share
More Decks by ANDPAD inc
See All by ANDPAD inc
OSS開発者という働き方
andpad
5
1.6k
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
プロダクト開発を支えるデータ利活用:中央集権から「民主化」までの軌跡
andpad
0
140
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
370
読もう! Android build ドキュメント
andpad
1
430
アンドパッドにおける CocoaPods ライブラリ群の SwiftPackageManager への移行戦略
andpad
0
210
Flutter は DCM が 9 割
andpad
1
350
Amplify で SPA をホスティングする際の注意点
andpad
1
290
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
andpad
0
140
Other Decks in Design
See All in Design
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
350
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
450
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
860
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
2.9k
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
390
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
920
mento Design Team Portfolio
mento0fficial
1
610
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
300
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
120
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
240
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.2k
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
540
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
339
57k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Scaling GitHub
holman
463
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Producing Creativity
orderedlist
PRO
347
40k
A Tale of Four Properties
chriscoyier
160
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
Copyright © 2020 Present ANDPAD Inc. This information is confidential
and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 施工管理アプリケーション UI設計の勘所3選 四倉昇平
2020年7月にANDPADにジョイン 施工管理アプリケーションのUIデザイン(Web/アプリ)を担当しています。 新卒のとき、業務用音響機器の新規事業部に配属され、ハードウェアエンジニアとして 働いていました。AppleがiPadを発表した時に新しいプロダクトの仕様を設計するため に、UIデザイナーにジョブチェンジしました。 2021年3月からスプラトゥーン2にはまっています。 シン・エヴァンゲリオンは先週見ました!
四倉 昇平 株式会社アンドパッド UIデザイナー 自己紹介 1
いきなり、抽象的な話をします
UIってなんだろう 2 図1:UIは、ユーザーとソフトウェアの橋渡し役 ユーザーは、ソフトウェアの機能を気に入って使用したいと思っている。 UIは、そのソフトウェアの機能を、ユーザーが使用することを阻害してはいけない。
実際のUIをご覧いただきながら実例を...
まだ外部に公表できる(大規模な)新機能があり ませんでした🙇
3 データの構造を、 最適にUI上に表現することを考える 1 勘 所
勘所1の実例:案件ラベルを選択する 4 案件(=1つのおうち) 【要件】案件ラベルを元に案件を検索したいので、案件ラベルを選択したい (案件の中に) (たくさんの情報があります) 案件ラベル1:選択肢1、選択肢2…. 案件ラベル2:選択肢1、選択肢2…. 案件ラベル3:選択肢1、選択肢2…. 案件ラベル4:選択肢1、選択肢2….
案件ラベル5:選択肢1、選択肢2…. : 案件ラベル 案件ラベルに格納する情報 ・エリア ・支店 ・リフォーム工事種類 ・建物種類 ・外壁材 など....
勘所1の実例:案件ラベルを選択する 5 愚直に表示すると、表示領域が無限に増えてしまう ユーザーが欲しいデータのみを取り出せるように表現
6 UIスタックを、強く意識する 2 勘 所
勘所2:UIスタック 7 提唱している元記事:How to fix a bad user interface 空
ローディング 部分達成 エラー 理想 図は元記事からの引用です。
勘所2:UIスタック例 8 ローディング状態 エラー状態 理想状態 【要件】CSVファイルをインポートしてバックエンドで処理をしたい 事前に開発チームで必要 なケースを検討する
勘所2:UIスタック(初期表示) 9 toCアプリケーションでは、何も無い状態に 見せてしまうことはマイナスに働くことが多い (参考:UberEats) toBアプリケーションでは、何も無いことを 愚直に表現しても問題ないこと (むしろ分かりやすい)も多い
10 オフライン、または回線が弱い状況の想定 3 勘 所
勘所3:オフラインの考慮 11 • 途中でオフラインになったときに適切なフィードバックを返す • 長時間の処理は、画面から離れても良いように設計する • ANDPADではエンジニア主導で、新しい機能から検討できている • iOS/Androidアプリは外で使われることが多い(=回線が弱い)
• 特に住所がまだ決まっていなかったり、大きな建設現場など、回線が貧弱な状 況で使用されることが多そう 対 応 想 定
勘所3:オフラインの考慮 12 エンジニアから「ネットワークに接続されていないと、 変更されたセルがわからない」「その際遷移をどうす るか」と相談を受けた 👍 この画面に遷移しても、ネットワークに接続されてい なければ情報が取得できないので、遷移すること自 体をやめた。 前画面で変更された箇所が正しく分かることの方が
重要と判断。
ここまで、どうおもいます?
ご覧いただいた方の感想(予想) 13 • 地味... • 地味なのに考えること多くて大変そう • なんかもっとパッと華やかで、シュッとしたデザインが見たかった
わたしもそうおもいます
None
ミッションを具現化した例 14 • 工務店が「全員定時にあがりみんなでサウナに行くこと」を目標として、 ANDPADの導 入&契約を開始👍👍 • 会社ホームページ/名刺にANDPADロゴを入れたい!という依頼 👍👍 ◦
ANDPADを利用してコロナ禍でも、現場管理できているという実績に 👍👍 ◦ 協力会社もANDPADを利用した方が便利だからという理由で周知してくださる企 業も👍👍
ご静聴いただき ありがとうございました!