Upgrade to Pro — share decks privately, control downloads, hide ads and more …

非デザイナーのフロントエンドエンジニアがOOUIを考える

yud0uhu
March 24, 2024

 非デザイナーのフロントエンドエンジニアがOOUIを考える

3/24(日)に開催された、Object-Oriented Conference 2024(OOC2024)のTrack D(15:00〜)トークセッションの資料です。
https://ooc.dev/2024/
https://fortee.jp/oocon-2024/proposal/5565aea9-fcdc-4122-8b03-febb5dd52cae

yud0uhu

March 24, 2024
Tweet

More Decks by yud0uhu

Other Decks in Design

Transcript

  1. タスク指向UIを改善する タスク指向UIのデリバリー注文アプリ メニュー 注文する 店舗検索 デリバリー注文 お届け先 住所 ただいまのお届け時間 30分

    今すぐ配達 配達予約 デリバリー注文 お客様情報 氏名 電話 確認画面へ デリバリー注文 お届け先確認 氏名 XXXX XXXX 電話 XXX-XXXX-XXXX 住所 XXXX XXXXXXXX XXX XXXXXXXX XXXXX 商品選択へ デリバリー注文 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000 合計金額 0円 デリバリー注文
  2. タスク指向UIを改善する タスク指向UIのデリバリー注文アプリ メニュー 注文する 店舗検索 デリバリー注文 お届け先 住所 ただいまのお届け時間 30分

    今すぐ配達 配達予約 デリバリー注文 お客様情報 氏名 電話 確認画面へ デリバリー注文 お届け先確認 氏名 XXXX XXXX 電話 XXX-XXXX-XXXX 住所 XXXX XXXXXXXX XXX XXXXXXXX XXXXX 商品選択へ デリバリー注文 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000 合計金額 0円 デリバリー注文
  3. タスク指向UIを改善する タスク指向UIのデリバリー注文アプリ メニュー 注文する 店舗検索 デリバリー注文 お届け先 住所 ただいまのお届け時間 30分

    今すぐ配達 配達予約 デリバリー注文 お客様情報 氏名 電話 確認画面へ デリバリー注文 お届け先確認 氏名 XXXX XXXX 電話 XXX-XXXX-XXXX 住所 XXXX XXXXXXXX XXX XXXXXXXX XXXXX 商品選択へ デリバリー注文 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000 合計金額 0円 デリバリー注文
  4. タスク指向UIを改善する タスク指向UIのデリバリー注文アプリ メニュー 注文する 店舗検索 デリバリー注文 お届け先 住所 ただいまのお届け時間 30分

    今すぐ配達 配達予約 デリバリー注文 お客様情報 氏名 電話 確認画面へ デリバリー注文 お届け先確認 氏名 XXXX XXXX 電話 XXX-XXXX-XXXX 住所 XXXX XXXXXXXX XXX XXXXXXXX XXXXX 商品選択へ デリバリー注文 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000 合計金額 0円 デリバリー注文
  5. タスク指向UIを改善する タスク指向UIのデリバリー注文アプリ メニュー 注文する 店舗検索 デリバリー注文 お届け先 住所 ただいまのお届け時間 30分

    今すぐ配達 配達予約 デリバリー注文 お客様情報 氏名 電話 確認画面へ デリバリー注文 お届け先確認 氏名 XXXX XXXX 電話 XXX-XXXX-XXXX 住所 XXXX XXXXXXXX XXX XXXXXXXX XXXXX 商品選択へ デリバリー注文 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000 合計金額 0円 デリバリー注文
  6. タスク指向UIを改善する タスク指向UIのデリバリー注文アプリ メニュー 注文する 店舗検索 デリバリー注文 お届け先 住所 ただいまのお届け時間 30分

    今すぐ配達 配達予約 デリバリー注文 お客様情報 氏名 電話 確認画面へ デリバリー注文 お届け先確認 氏名 XXXX XXXX 電話 XXX-XXXX-XXXX 住所 XXXX XXXXXXXX XXX XXXXXXXX XXXXX 商品選択へ デリバリー注文 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000 合計金額 0円 デリバリー注文 選択が本当に正しいのかわからないまま先へ進まなければならない状況 「情報なき合意(アラン・クーパー『コンピュータは、むずかしすぎて使えない』)」
  7. タスク指向UIを改善する オブジェクト指向UIによる改善例 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜

    10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000〜 10〜25 分 毎日食べたい王道の味! 定番チキンカレーライスセット ¥1,000 合計金額 0円 デリバリー注文 ユーザーはデリバリーを注文するのにアプリを使っているのだから トップ画面でわざわざ「やること」を選ばせる必要はない
  8. 実践 レイアウトパターンの適用 店舗 会場 店舗 会場 店舗 会場 A会場 B会場

    ソラリス [A会場] 53m / ブース2 156 156 2 ソラリス [A会場] 53m / ブース2 156 156 2 ソラリス [A会場] 53m / ブース2 156 156 2 セブン [B会場] 60m / ブース2 156 156 2 セブン [B会場] 60m / ブース2 156 156 2 セブン [B会場] 60m / ブース2 156 156 2 チェンマイ [A会場] 150m / ブース3 156 156 2 チェンマイ [A会場] 150m / ブース3 156 156 2 チェンマイ [A会場] 150m / ブース3 156 156 2 カルデラ カルデラ コレクション 店舗
  9. 実践 レイアウトパターンの適用 シングル 店舗 店舗 会場 店舗 会場 店舗 会場

    カルデラ A会場 53m / ブース2 ショップ紹介 Edit Delete 000-1234-5678 サンプルサンプルサンプルサンプルサンプルサンプルサンプ ルサンプルサンプルサンプルサンプルサンプルサンプルサン プル メニュー ※当日の状況により2Fレストラン 「シースケープ テラス・ダイニング」もしくは、「グリロジー バー&グリル」での ご案内となります。 ・パンの盛り合わせ ・ホッケのタルタル  アスパラガス  キャロット  白味噌バジルソース ・鱈のポテト包み焼き  ハーブバター   または  北海道産スペアーリブのジンギスカンソース ・北海道産生クリーム  ピスタチオのヌガーグラッセ  イチゴソース ・コーヒーまたは紅茶 Edit Delete