タグ

UIとmobileに関するishideoのブックマーク (6)

  • モーダルとポップアップの違いは?ユーザビリティを良くするウィンドウの使い方まとめ | Workship MAGAZINE(ワークシップマガジン)

    思うように閉じてくれないウィンドウに、イライラしたことはありませんか? モーダルウィンドウとは、まさにそんなウィンドウのこと。 Webサイトやアプリケーションに組み込まれるUIのひとつであるモーダルウィンドウについて、適切な使い方や基的な情報をまとめました。 モーダルとは「モーダルウィンドウ」 モーダル(=modal)とは「モードを持つ」という意味で、「あなたがこのウィンドウを閉じるまでなにもさせません」というウィンドウのことです。 ウィンドウ内で表示された操作を完了する、あるいはキャンセルをしなければ、ウィンドウの外をクリックしても戻れません。 このため、モーダルウィンドウはユーザーに重要な操作や確認を促したりするときに用いられることが多いです。また、モーダルウィンドウは『JavaScript』で作られることが多いです。 近年は操作感が悪くなるという理由から、モーダルウィンドウを避ける

    モーダルとポップアップの違いは?ユーザビリティを良くするウィンドウの使い方まとめ | Workship MAGAZINE(ワークシップマガジン)
  • モーダルウィンドウはやめて!モバイルで最適なUIとは? | UX MILK

    モバイルサイトで最もフラストレーションのたまるユーザー体験の一つとしてモーダルウィンドウが挙げられます。PCサイトでは画面サイズが大きいので、モーダルウィンドウの表示に問題はありませんが、モバイルの場合はウィンドウが(ほとんどの場合)、画面外にはみ出てしまいます。ユーザーはモーダルの一部しか閲覧できず、閉じるのにも一苦労です。 また、画面上にキーボードが表示されている場合、閲覧は更に困難となります。キーボードは画面上に大きな面積を占め、ユーザーは自分が何を入力しているのかを確認するために、いちいちスクロールする必要が出てきます。もし、モーダルウィンドウで表示されているコンテンツを快適に見せたいのであれば、モバイルでのモーダルの使用は控え、代わりにアコーディオンを使いましょう。 アコーディオンはコンテンツをページ内に納めて表示するので、モーダルのように元のページにかぶさって表示されることはあ

    モーダルウィンドウはやめて!モバイルで最適なUIとは? | UX MILK
  • どのようにして高速に iOS アプリの UI を作り上げるか:動作モックの活用と実装時の UI 作りこみ - クックパッド開発者ブログ

    Holiday デザイナーの多田です。 皆さんは Web アプリやモバイルアプリを開発する時、モックアップ作成にどれだけ時間を割いているでしょうか?もしくはモックアップを作成せずにすぐに実装に入るでしょうか?私はこれまで Web アプリ開発ではいきなり実装に入ることが多かったのですが、Holiday iOS アプリ の開発では Web アプリの時のように上手くいかないことに気づき、やり方を考え直しました。iOS アプリ開発の過程で、モックアップ作成や実装をどのように捉えるか、具体的にどう行うか、ということが自分なりに見えてきたので、それらについてご紹介します。 目的は、価値のあるプロダクトを速くユーザの手に届けること Web アプリやモバイルアプリの開発過程においてモックアップなどを作る目的は、あくまでも ユーザに届く プロダクトの価値を高めてそれを速くリリースすることです。適切な前準備は

    どのようにして高速に iOS アプリの UI を作り上げるか:動作モックの活用と実装時の UI 作りこみ - クックパッド開発者ブログ
  • 1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering

    初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初

    1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
  • jQT

    jQT A Zepto/jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.

    jQT
  • jiglet.jp: jigletアプリ一覧

    jiglet.jpは、携帯電話でPCサイトを閲覧するフルブラウザ「jigブラウザ」を更に便利にするプラグイン、「jiglet」を紹介するポータルサイトです。

  • 1