タグ

画面遷移に関するshirotorabyakkoのブックマーク (8)

  • Cacoo - Web上で図の作成とリアルタイムコラボレーション

    Online diagramming tool for collaborating on wireframes, flowcharts, and more

    Cacoo - Web上で図の作成とリアルタイムコラボレーション
  • 第9回 UIデザインの基礎知識:操作の流れに気を配ったインタラクション

    使い勝手は,ユーザー・インタフェース(UI)の「デザイン」によって大きく変わる。一般にデザインという場合,画面上の要素について色や配置を決めていく「ビジュアル・デザイン」だけを想像しがちだ。出来上がったシステムに対し,「使い勝手の良いデザインを作ってほしい」と依頼するようなエンジニアは,たいていビジュアル・デザインに目が向いている。 実際はビジュアル・デザインだけでなく,利用者とシステムの対話方式を決める「インタラクション・デザイン」がある。画面遷移などを含むもので,ビジュアル・デザインよりも先に決める必要がある。インタラクション・デザイン抜きにビジュアル・デザインで帳尻を合わそうとしても限界がある。 UI設計に携わるエンジニアは,インタラクション・デザインとビジュアル・デザインの両方の基礎知識を持つ必要がある。システムによってはプロのデザイナーがプロジェクトに参加することもあるはずだ。デ

    第9回 UIデザインの基礎知識:操作の流れに気を配ったインタラクション
    shirotorabyakko
    shirotorabyakko 2007/11/03
    利用者が心の中に構築している情報や動作の構造(これを「メンタル・モデル」と言う)と素直にマッチする
  • 第20回 画面遷移図作成の実践:ITpro

    前回は画面遷移図の作成方法やと構成といった基について説明した。今回は,実際に画面遷移図を作成するうえでのポイントと注意点を解説する。 ハイレベル・サイトマップとフローチャートをミックスする 今回説明する画面遷移図とは,リンク関係図のことではない。Excelを使って,1機能を1ワークシートに描く,リンク関係と画面設計とデータベース設計が混然一体となった図のことだ。Webデザイナー出身のプランナーには,ハイレベル・サイトマップ(双方向の詳細なリンク関係図)とフローチャートのごった煮のように見えるかもしれない。 前回述べたように,リンク関係図では「1個の箱」問題が生じる。さらに詳しいハイレベル・サイトマップでも,イベントと処理の関係を示すことは難しい。一方,フローチャートでは画面レイアウトを表現できない。また,技術者の間でのみ通用する表現手法では,顧客側との意思疎通をはかるには不都合だ。顧客と

    第20回 画面遷移図作成の実践:ITpro
    shirotorabyakko
    shirotorabyakko 2007/03/22
    画面遷移図を描く人が最も注意すべきは,条件分岐で条件外の場合の処理を忘れがちになること。「実行」「取消」のような簡単な分岐で「取消」が終端であったとしても,終端であることを示すクセを。
  • 第19回 画面遷移図作成の基本

    企画書と同時に提出する画面遷移図は,Webの骨格だ。この図一つで,制作・開発効率や工期が決まるといっても過言ではない。今回と次回で,画面遷移図作成の基と実践について見ていこう。 開発の効率化と長期運用のために 画面遷移図の果たす役割は大きい。顧客に完成予想図をイメージしてもらい,受注を獲得するための一助になる。概算見積書を作成するための資料にもなる。そして,実装機能やデータベース設計を固めるためのタタキ台にもなる。企画書と共に提出すれば終わりというわけではなく,モックアップやプロトタイプ開発にも利用できる。顧客との間で意識や記憶にズレが生じた場合の確認資料としても重宝する。 受注が確定的になると,顧客の要求を入れながら,何度も修正を重ねていく。画面遷移図の段階で調整に時間をかけて完全な合意を得ておけば,開発はスムーズに進む。段取り八分が何より肝心だ。データベース設計のような根幹の部分に変

    第19回 画面遷移図作成の基本
    shirotorabyakko
    shirotorabyakko 2007/03/22
    筆者の遷移図は,Excel。オートシェイプの「基本図形」「ブロック矢印」「フローチャート」を使えば,ほぼこと足りる。箱の数と1個の箱を実装するための工期が必ずしも一致しないリンク関係図の「1個の箱」問題
  • ER図や業務フロー図も作成できる新しい「JUDE/Professional」 - @IT

    チェンジビジョンは2月22日、これまで「UML描画ツール」としてアピールしてきた「JUDE/Professional」に新たな機能群を追加することで、システム開発における上流工程(業務分析、設計など)に特化したツールとしての進化を目指すと発表した。「JUDE/Professional」ついて、同社 代表取締役社長 平鍋健児氏は「思考を遮断することなくスムーズに設計へ導くツールにしたい」と話した。 2月28日にリリースするバージョン3.2は「システムの見える化・設計ツール」のプレバージョンという位置付けで、データモデルの作成を支援するER図作成機能やSQL出力機能などが追加される。バージョン3.2を受けて、「システムの見える化・設計ツール」の正式版として5月にバージョン5.0をリリースする。 バージョン5.0には、エンティティ定義書の出力機能やマインドマップからのエンティティの出力機能、UM

  • 第3回 「資料請求」「問い合わせ」「会員登録」を増やすコツ | ユーザー視点のウェブデザインガイド

    第3回 「資料請求」「問い合わせ」「会員登録」を増やすコツ 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか? 今木 智隆(株式会社ビービット) サイト目的を踏まえた設計の重要性ウェブサイトは、「販売」「プロモーション」「ブランディング」など、さまざまな目的のために作られている。 そういった目的を達成するにあたって、サイトがユーザーに行き着いてもらいたい代表的なアクション(=ビジネスゴール)には、以下のようなものが挙げられる。 製品の購入メルマガ登録 会員登録 資料請求お問い合わせこのゴール設

    第3回 「資料請求」「問い合わせ」「会員登録」を増やすコツ | ユーザー視点のウェブデザインガイド
  • 意図が伝わる設計書作成の心得【第2回】

    設計者とユーザーの間では,システムの仕様を巡って「言った,言わない」の泥仕合をすることが少なくない。両者の思惑や認識がすれ違ったまま基設計書を作ってしまった結果である。困ったことに,これは一見良好なコミュニケーションを確立したと思われる場合にも起こり得る。このテーマに基づき,二つの実例を通して設計書作成の心得を紹介する。 基設計書は,ユーザーと円滑にコミュニケーションを行うためのツールであり,コミュニケーションの結果を書き留めたものである。 それ故,コミュニケーションがうまくいかないと,基設計書に残された情報に思わぬ勘違いや間違いが埋め込まれ,これが後々,プロジェクトに大きな危険をもたらす可能性がある(図1)。恐ろしいことに,誤解の種はユーザーや設計者が発した,たった一言でも生じ得る。基設計書の作成段階においては,とにかくユーザーとのコミュニケーションを重視し,お互いの考えやシステ

    意図が伝わる設計書作成の心得【第2回】
  • 1