Tries for creating a UXD culture

by Satoru Kawahara

Slide 1

Slide 1 text

インフラ企業で働くフロントエンドエンジニアの挑戦河原覚 2014-09-27 @ UX-Sapporo × CSS Nite in SAPPORO よりよい UX のために（編集版）

Slide 2

Slide 2 text

河原覚 @esukei かわはらさとる

Slide 3

Slide 3 text

プラットフォーム事業部サービス開発チーム

Slide 4

Slide 4 text

さくらの VPS コントロールパネルフロントエンドエンジニア UI デザイナー

Slide 5

Slide 5 text

・UX を考えるにあたって直面した問題・問題を解決するための挑戦はじめに・さくらインターネットは全体で 200 人規模・プロジェクトには複数の部署が参加

Slide 6

Slide 6 text

2013 年 7 月開発部インターフェイス設計担当として入社

Slide 7

Slide 7 text

1ヶ月後さくらの VPS コントロールパネルリニューアルプロジェクト参加

Slide 8

Slide 8 text

せっかくリニューアルするんだから、コントロールパネルにとどまらないで、サービスの UX も考えたい！

Slide 9

Slide 9 text

領域が分断している

Slide 10

Slide 10 text

紹介サイト部署 A 会員登録部署 B コントロールパネル部署 C ヘルプページ部署 D VPS 関連コンテンツと分担

Slide 11

Slide 11 text

UI デザインに十分な時間が取られていない UI デザインの修正が行いにくい

Slide 12

Slide 12 text

それまでの UI 開発フロービジュアルデザイン HTML+CSS サーバサイドテンプレート化必要に応じて修正・追加仕様検討・環境構築開発内容の決定デザイン開発

Slide 13

Slide 13 text

UI デザインの認知度が低い UI をデザインする文化がない

Slide 14

Slide 14 text

こういうレイアウトでどうでしょう？あ、ここちょっとまずそうだね。どう直したらいいか意見ありますか？うーん�� ○○したらいいかも� ？じゃあ、それで次回までにお願いします。！？とある会議メンバーわたし進行役

Slide 15

Slide 15 text

UI デザイン品質責任者の不在

Slide 16

Slide 16 text

？会議では承認取ったけど、良し悪しは誰が判断するんだろう� だいたい決まったあと

Slide 17

Slide 17 text

あれ？ UX デザインとか言ってる場合じゃないんじゃ�？

Slide 18

Slide 18 text

それでも、やっぱり�

Slide 19

Slide 19 text

サービスとして、ブランドとして、よりよい UX を考えていきたい。

Slide 20

Slide 20 text

UX デザインのために必要なこと・横断的に行える環境・持続的に行うための文化

Slide 21

Slide 21 text

UX と UI の関係誰にどう使って欲しいのか適切な UI ・UXD を実現するための UI ・持続的な UXD に　対応できる柔軟な UI 開発環境

Slide 22

Slide 22 text

UI デザイナーとして、フロントエンドエンジニアとして、できることから挑戦

Slide 23

Slide 23 text

UI デザイナーとして

Slide 24

Slide 24 text

・デザイン文化の醸成・UI デザイン手法の導入

Slide 25

Slide 25 text

デザイン文化の醸成

Slide 26

Slide 26 text

・UX は横断的に取り組まないといけない・UI デザインは開発の一部・よりよいサービスのために UX を考えたい地道に啓蒙

Slide 27

Slide 27 text

「デザイン上の理由」で発言するここは使いやすさを考えて、このようにしてみました。こういう提案がありましたが、使いやすさを損なうと思うのでこのままで行きたいと思います。

Slide 28

Slide 28 text

UI デザイン手法の導入

Slide 29

Slide 29 text

・ペーパープロトタイピング・PC 上で操作できるモック・ユーザテスト

Slide 30

Slide 30 text

ペーパープロトタイピング・実際の開発やビジュアルデザイン制作の前に　紙の上で画面を検討する手法・ワイヤーフレームよりもより具体的な画面を起こす・ユーザビリティ上の問題を早い段階で検討し、　クオリティアップや開発中の手戻りを少なくできる

Slide 31

Slide 31 text

操作できるモック・ペーパープロトタイピングの結果を清書し、　リンクを貼るなどして操作できるようにしたもの・より実際の操作環境に近づけて検討ができる・ユーザテストを行いやすくする

Slide 32

Slide 32 text

ユーザテスト・社内の人間を捕まえて実施・テスターのバランスをとるため、　社内であっても詳しくない人に頼んだり・操作可能なモックを利用・大きく変わる箇所について仮説を検証

Slide 33

Slide 33 text

・よりよい UI デザインのため・メンバーへの共有のしやすさ・意見の裏打ちとなる客観データ UI デザイン手法導入の意味

Slide 34

Slide 34 text

よりよい UI デザイン環境へ文化の醸成手法の導入＋

Slide 35

Slide 35 text

フロントエンドエンジニアとして

Slide 36

Slide 36 text

・フロントとバックを疎な構成に・フロントエンド開発環境の改善

Slide 37

Slide 37 text

関係を疎にする RESTful API を中心とした構成への変更

Slide 38

Slide 38 text

これまでのフローデザインフロントテンプレート機能開発

Slide 39

Slide 39 text

API 中心のフローデザインフロント API 仕様決定

Slide 40

Slide 40 text

・API を利用した UI 開発に集中・API を提供することに集中フロントエンドバックエンド

Slide 41

Slide 41 text

・フロントエンド開発環境上に　サーバを用意するさらに開発しやすく

Slide 42

Slide 42 text

タスクマネージャでサーバ構築 grunt-contrib-connect サーバを立てる grunt-connect-proxy リバースプロキシ node-easymock お手軽 JSON 配信サーバ

Slide 43

Slide 43 text

connect proxy / /api /api/feature app index.html assets プロジェクトフォルダローカルサーバ構成 servers.json switches.json accounts.json API モックフォルダ node-easymock http://0.0.0.0:3000 にアクセステストサーバなど

Slide 44

Slide 44 text

・テストサーバの用意も待たなくて良い・フロントエンドだけでも　実践的な開発を進められる・依存関係をより少なく出来るローカルサーバの利点

Slide 45

Slide 45 text

UI デザインの改善も進めやすく開発環境改善構成変更 +

Slide 46

Slide 46 text

UI デザイナーとして・文化・手法導入フロントエンドエンジニアとして・環境改善

Slide 47

Slide 47 text

UXD のための柔軟な UI 開発環境挑戦結果

Slide 48

Slide 48 text

適切な UI デザイン開発効率化使いやすさをデザインしたコントロールパネルへ + 開発中のコントロールパネル

Slide 49

Slide 49 text

まとめ

Slide 50

Slide 50 text

なぜ UX を考えるのか

Slide 51

Slide 51 text

UXD は何のために・戦略にもとづいた開発 / 改善・サービスの品質を向上させる

Slide 52

Slide 52 text

ユーザのためのよりよいサービスを提供したい！

Slide 53

Slide 53 text

UXD の取り組み方・サービスに関わるすべての人と共有・持続的に改善していく

Slide 54

Slide 54 text

・周りを巻き込むための工夫が必要

Slide 55

Slide 55 text

・納得してもらう必要がある・開発フローの改善等で可能な限り吸収するコスト/ 時間の増加・現状の改善のため・更なるクオリティアップのため・長期的な最適化のため、など説得材料

Slide 56

Slide 56 text

一人で全部は難しいし、時間がかかるかもしれないけれど�