HTML: ログイン・ユーザー登録フォームの厳選ベストプラクティス11（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 11 HTML best practices for login & sign-up forms—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/05/24 原著者: Andrey Sitnik（PostCSSとAutoprefixerの作者、首席フロントエンドエンジニア） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。 はじめに ログインフォームやユーザー登録（サインアップ）フォームは、ほとんどのWebサイトで使
課金 UI まとめてみた｜あき - 良いもの作って正しく届ける
売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい！ コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限
Atomic Design by Brad Frost
We're tasked with making interfaces for more users in more contexts using more browsers on more devices with more screen sizes and more capabilities than ever before. That's a daunting task indeed. Thankfully, design systems are here to help. Atomic Design details all that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster
ウェブサイトのデザイン変更が腹立つ理由
あんなに簡単だった事がなんでこんなに面倒に?! ってなりますよね。 ウェブサイトのデザインが変わると、戸惑う事が多いと思います。簡単な見た目だけの変更ならともかく、メニューやボタンの配置は少し変わるだけでもユーザー体験に大きく影響します。 米GizmodoのMario Aquilar記者はSeamlessというオンライン出前サービスを利用しているのですが、そのサイトのデザインが大きく変更して、かなりご立腹な様子。と同時に、我々がどうしてこんなにリデザインに抵抗があるのかを調査したようです。 ああSeamlessよ、私に餓死しろというのか？ 大手オンライン出前サービスが数週間前に劇的なリデザインを行って以来、多くの人がそう思っています。何一つとして以前と同じ場所にないのです。新しいインターフェイスの巨大なエレメントは、旧デザインに比べるととっちらかった独房のようです。 まだ技術的に未発達だっ
Notification UX - 安藤日記
安藤日記 安藤日記：デジタルガジェット好き「安藤幸央」の日々のメモ ( yukio.andoh@gmail.com ) [ http://twitter.com/yukio_andoh ] Design Sprint Newsletter https://designsprint.substack.com/ ■ Notification UX：最適なプッシュ通知のための UX 観点 iPhone,Android のネイティブアプリの特権であるプッシュ通知／Notification。 ユーザーの行動を喚起するために、便利に使えるサービスでありながら、 通知の送り方を一度間違えてしまうと、ユーザーに嫌われてしまいます。 そうすると、サービス事業者は失敗を恐れるあまり、 通知を送って失敗するよりも、送らないで済まそうと考えるようになってしまいます。 最悪、通知の方法を失敗すると、 それほど日常的
User Onboarding | A frequently-updated compendium of web app first-run experiences
User Onboarding is the process of radically increasing the likelihood that new users become successful when adopting your product. Teardowns Let's learn some lessons from how popular web apps do it! Here's the latest: And here are some other recent ones: WordPress QuickBooks Bitcoin » See all teardowns Onboarding Design Articles Never Mix Up Features with Benefits Ever Again… Bulletproof User Onbo
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
0から学ぶアプリの配色 - Rejasupoem
当方Androidエンジニアをしておりますが、プライベートでアプリを作るとき、画像リソースについてはAndroid組み込みのものを使ったり、Fontawesomeを使ったり、フリー素材を使ったりしています。 しかし配色はインターネットに落ちていなくて、自分でやるとイマイチで、いい感じにしたいという気持ちがありました。 そこで、調べたり試行錯誤をして知見が得られたので、配色に悩むエンジニアのために共有します。 3行まとめ デザインはセンスで行うものではなくロジックで成り立ってる、つまり努力でなんとかできる Color Scheme Designer 3 便利 配色を学ぶのには下のスライドが一番分かりやすかった 色彩センスのいらない配色講座 from Mariko Yamaguchi STEP 1. 対象に興味を持つ 〜〜で必要だから勉強しなければって始めてたものが長く続いたことがないので、
Kill The Hamburger Button | TechCrunch
That little three-lined button is the devil. Whether you call it a side menu, navigation drawer, or a hamburger, hiding your features off-screen behind a nondescript icon in the corner is usually a poor mobile design choice. Interaction theory, A/B tests, and the evolution of some of the top apps in the world all support the same thesis: The hamburger button is bad for engagement, and you should p
Feed UI Patterns - Rejasupoem
タイムラインとかフィードを見る系でいい感じのアプリない？と聞かれたのでアプリのUIを眺めていました。 Feedly foursquare YouTube SocialCam Path Pinterest Gunosy 見比べてみて、誰が投稿したか、誰が投稿に対して反応したか、何時に投稿されたか、何を最初に知らせたいのか、写真を良く見せたい、などそのサービスにとって何が重要なのかによって "いい感じ" の意味が変わってくるなあと思いました。 ちなみに僕はデザインの引き出しが少ないので、まとめサイト的なものを見て探しています。 Mobile UI Patterns Mobile Design Pattern Gallery Android Interaction Design Patterns AndroidViews Android // UI Patterns lovely ui andr
Psychology of waiting and Facebook - Mercury Blog
The psychology of waiting, loading animations, and Facebook Last Friday, I had the pleasure of speaking at Renaissance, an iOS developer conference in San Francisco, about the heightened importance of animation in iOS 7 and how animation can be used to improve usability1. One of the points that I discussed briefly was the use of loading animations to indicate status. Before I dig in, let me start
FacebookのニュースアプリPaperのUIと、その背後に見える戦略について | fladdict
Introducing Paper from Facebook on Vimeo. FacebookがリリースしたニュースアプリPaper、さっそくダウンロードして触ってみた。 使ってみた第一印象は、「意欲的な実験作だが、まだ実用品ではない」といった感じだ。 外見や手触りが注目されるPaperだが、しかし僕自身が一番注目しているのは右上のナビゲーションだ。Paperの右上は、「人」「会話」「通知」 というFacebookの基幹アプリとまったく同じ構成なのである。そしてFacebookの同機能にアクセスする。つまり、Paperはニュースアプリの形をしているが、本質的にはFacebookクライアントなのだ。 これは。何を意味するのか・・・ つまりFacebookは今後、様々なコンセプトのFacebookクライアントを複数リリースするということだ。 右上のボタン群が主張するUI上のメッセージは、
アプリの評価を良くするということについて考える - Rejasupoem
なぜ評価を良くすることが重要なのか Google Playでグロースハックする5つのポイント Googleの発表によると、星4つ以上の評価を受けているアプリは、そうでないアプリのなんと29倍のレベニューを生んでいるそうです。 Google Play IAP revenues rocket 700% Apps with a two star rating are likely to generate 74x more revenue than a one star-rated app. Jumping to three stars meanwhile saw a 1.8x increase in revenue, while four-to-five star games on averaged generated 2.8x more money than three star-rated
「スマホ受けの条件が分かった」nanapiのQ&Aアプリ『アンサー』はなぜチャット型なのか、けんすう氏ら開発陣に聞く - エンジニアtype
「スマホ受けの条件が分かった」nanapiのQ&Aアプリ『アンサー』はなぜチャット型なのか、けんすう氏ら開発陣に聞く 2013/12/25公開 「β版では5分以内の即レス率90%」というキャッチーなプレスリリースと共に、2013年12月５日、nanapiが公開したQ&Aアプリ『アンサー』（iOSのみ対応）。そのレスポンス率の高さから、多くのWebメディアに取り上げられ話題となった。 その一番の理由は、『アンサー』がスマホユーザー向けに特化されたチャット型のインターフェースを搭載したことにある。投げかけられた疑問や相談事を、ユーザー同士の「会話」を通じて解決するのが特徴だ。 「徹底的にスマホユーザーの志向に合わせたアプリにした」と語るのは、『アンサー』開発プロデューサーの岡山智氏。さらに、代表取締役のけんすうこと古川健介氏は、「今までわれわれが培ってきたWebの常識をすべて捨てて開発した意欲
【アプリ開発のお手本に】iOS 7の設計においてアップルが大切にした4つのポイント | TOKOROM BLOG
今回の記事はUIデザイナの Morino氏 からの寄稿です 前回 はiOS 7紹介ビデオの中のジョナサン・アイブ氏のパートをご紹介しました。 今回は、その中でも特に重要と感じたいくつかのフレーズをピックアップして深堀りしてみたいと思います。 “True simplicity” iOS 7から話題の"フラットデザイン"が採用されて、画面デザインは大分シンプルな外観になりました。 使う色の数は限定され、簡単明瞭なラインやシルエットがほとんどのデザインを占めています。 iOS 6まで採用されていたSkeuomorphism（装飾的・リアルな外観）は排除され、立体的で質感を感じるデザインから、平面的で形やテキストの意味性をストレートに伝えるデザインに変わりました。 ただ、“Simplicity"という言葉は、単に外観を表すものとして使われているわけではありません。 「複雑さに秩序をもたらす」という
ユニクロ「スマホアプリも世界展開」でシステム再構築、その全容がすごい【ファーストリテイリング×ゆめみ座談会】 - エンジニアtype
トップページ > コラボ > ユニクロ「スマホアプリも世界展開」でシステム再構築、その全容がすごい【ファーストリテイリング×ゆめみ座談会】 2013年10月8日、ユニクロはスマートフォン向けに提供している『UNIQLOアプリ』をリニューアル公開した。 主な変更点は、着こなし例を表示する「スタイルディクショナリ」機能の新設や、現在地から最寄りのユニクロ店舗を自動表示してルート案内も行ってくれる「店舗検索機能」の強化。そして、ユーザーの日常生活を便利にする各種アプリを提供する「UNIQLO LIFE TOOLS」の新設などだ。 ただ、こうしたユーザーの目に触れる部分のリニューアル以外に、今回はアプリの設計思想から開発プロセス、バックエンドシステムの大転換まで行われたことを知る者は少ない。 この背景には、2001年のイギリス・ロンドンを皮切りに始まった、UNIQLO店舗のグローバル展開がある。中
iOS 7のユーザーエクスペリエンス評価
フラットデザインは行動のきっかけとなる要素を見えなくしている。また、周辺部付近でのスワイプは、カルーセルやスクロールに干渉する可能性がある。 iOS 7 User-Experience Appraisal by Raluca Budiu on October 12, 2013 日本語版2013年12月2日公開 iOS 7はAppleのタブレットとモバイルデバイス用のオペレーティングシステムだが、iOSの旧バージョンまでの特徴だったスキューモーフィックデザインをやめた。新しい外見はこれまでのバージョンのオペレーティングシステムとは大きく異なっており、Appleがこれまで8年かけて熱心に構築してきた約束事のいくつかを大胆に放棄している。しかし、新デザインは本当に良くなっているのか。新しい外見の好き嫌いにかかわらず、新機能の中にはユーザビリティにとっては歓迎すべき改善もある。その一方、苦痛をもた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
美しい無料UIエレメント素材35個まとめPhotoshopVIP |
http://www.motaitalic.com/skin/frontend/default/mota_italic/images/loading.gif
