HackerNoon - ユーザー エクスペリエンス分析: パート 2

おい！久しぶりです。私はまだ、HackerNoon のユーザー エクスペリエンスに関する大学のレポートを持っています。

前のパートでは、以下について説明しました。

1. ハッカーヌーンとは何ですか?

2. HackerNoon とペルソナの潜在的なユーザー。

3. アクセシビリティ、国際化、認知的および知覚的課題の側面に関する HackerNoon の分析。

   
   

この 2 番目のパートでは、次のことを説明します。

1. サイトの最も基本的な機能 - 読み取りと書き込み。サイトを閲覧する方法、および HackerNoon 記事を作成して投稿する方法。

   
   

2. HackerNoon の Web デザインと美学に関する一般的な理解と分析もいくつか説明します。

コンテンツの概要

• タスク分析

  HackerNoonの閲覧

  HackerNoon での執筆

• ユーザーインターフェイスのデザイン

  インタラクションスタイル

  美学

• 総合評価

タスク分析

HackerNoon 読者:

主な目標:興味のあるテクノロジー関連のトピックを読んで学ぶこと。

認知的ウォークスルー/目標に到達するためのステップ:

1. オプション1：

   ａ．ステップ 1:ウェブサイト、hackernoon.com にアクセスします。

   
   

   b.ステップ 2:気になる記事が見つかるまで、Web を閲覧してスクロールします。

2. オプション 2:

   ステップ 1: Web サイト、hackernoon.com にアクセスします。

   
   ステップ 2:検索バーに興味のあるトピックを入力し、Web サイト上でフォローしたり読んだりするストーリー、タグ、ユーザーのリストをナビゲートします。

   
   

3. オプション 3:

ステップ 1: hackernoon.com にアクセスします。

ステップ 2:ナビゲーション バーの上にマウスを置き、さらに詳しく知りたいトピックを選択します。

オプション 4:このオプションは、この分野全般に精通している通常の読者によって実行されることがよくあります。

ステップ 1: hackernoon.com にアクセスします。

ステップ 2:検索バーに「hackernoon.com/u/learn」と入力します。これにより、HackerNoon の従業員によって作成および管理されているアカウントが表示されます。このアカウントは、特定のトピックごとに必読の記事を集めたものとして機能します。

タスクの複雑さと多様性に関する議論:読者が興味に合った記事やトピックを見つけるために HackerNoon をナビゲートできる方法の認知的ウォークスルーを通じて、このドメインは読者が低い複雑さで簡単にナビゲートできるように設計されていると結論付けることができます。このレベルは、読者が読むべき特定のトピックを見つけるのに 2 ステップもかからないことが多いという事実によって証明されており、新しい読者でもサイトの使い方の基本を簡単に理解できます。

ただし、前述したように、読者が興味のあるトピックを読んだり見つけたりする方法が複数あるため、サイトの多様性レベルは比較的高いです。

HackerNoon ライター:

主な目標:記事を出版すること。

認知的ウォークスルー/目標に到達するためのステップ:

1. ステップ 1 : ログインするか、HackerNoon アカウントを作成します。

   
   

2. ステップ 2: HackerNoon ホームページで、「書き込み」をクリックします。作家のページが表示されます。ここで執筆テンプレートを参照することも、「下書きを開始」/「書き込みを開始」をクリックして下書きをすぐに開始することもできます。

3. ステップ 3:書き込みを開始します。

   
   

3.1.記事の良いタイトルを考えてください。良いタイトルは、執筆を大きく導くことができます。さらに、記事を HackerNoon に下書きとして保存するには、タイトルが必要です。

3.2.記事を書きます。ライターは、単純な記事を書くだけでなく、見出し、引用、カバー写真を追加したり、単語やフレーズを太字や斜体で書いたりして文章をカスタマイズするオプションを利用できます。

3.3.ライターは記事をより魅力的にするために要素を追加できます。これは、リンク、画像、さらにはビデオの埋め込みなどの新しい要素を挿入したい場所に「/」を入力することで実現できます。

3.4.ライターは記事を校正し、文法の間違いをチェックし、記事がHackerNoon の「すべきこと」と「してはいけないこと」に従っていることを確認し、最後に、HackerNoon は盗作されたコンテンツを公開しないため、盗作の可能性をチェックする必要があります。

盗作を確認するには、プロフィール写真の下にあるナビゲーション バーの「ストーリー設定」をクリックし、盗作データを生成するボタンをクリックします。

4. ステップ 4:書き込みを終了します。

   
   

4.1.記事のアイキャッチ画像を選択します。 「ストーリー設定」で「クリックしてアイキャッチ画像をアップロード」を選択すると、ウィンドウがポップアップし、自己アップロードからオンラインデータベースからの選択、AI生成画像の作成まで、アイキャッチ画像のさまざまなオプションがライターに提供されます。

4.2.ストーリーにタグを追加すると、カテゴリーに分類され、サイト上で記事が見つけやすくなります。

4.3.ストーリーに説明を追加します。

4.4.記事の TL;DR を作成します。ライターは自分で書くことも、AI に生成させることもできます。

5. ステップ 5:編集レビューのために記事を送信します。このプロセスは「第 2 の人間のルール」と呼ばれ、HackerNoon はまず編集者に記事を読み、必要に応じて編集を加え、公開するかどうかを決定します。

6. ステップ 6:編集上のレビュー後、記事が公開されると、HackerNoon はライターに公開を通知する電子メールを送信します。

タスクの複雑さと多様性に関するディスカッション:ライターが HackerNoon に掲載されるまでの基本的な手順の認知的ウォークスルーを通じて、上記の読者のタスク分析と比較して、複雑さのレベルが大幅に増加していることがわかります。

ライターが完全な記事を作成するには多くのステップとサブステップが必要であり、その後でも、ストーリーは公開される前に何層にもわたる品質管理を通過する必要があります。

バラエティに関して言えば、作家が HackerNoon に掲載されるという目標を達成する唯一の方法は、ストーリーを書くことです。

アクセシビリティの問題への対処方法:

HackerNoon は、読者が Voice Over サポートで記事を読むことができ、ライターがディクテーションを利用して執筆できるため、デバイスのアクセシビリティ サポート機能と互換性があるように設計されています。

さらに、ドメイン自体を考慮すると、HackerNoon の各記事には AI が読み上げる独自の音声が含まれています。

HackerNoon は「現実」世界での活動に関連しています。

21 世紀ではオンラインでの読み書きが現実の一部となっているため、HackerNoon は可能な限り「現実」です。オンライン出版物として、読み書きなどの活動はリアルタイムで行われ、記事は 1 時間ごとに投稿され、公開されると、すべての生身の人間がアクセスできる本物の情報となります。

さらに、ユーザーはお互いのストーリーにコメントすることができ、現実の会話を生み出すことができます。さらに、記事を編集レビューに投稿する際、ライターは「ストーリー設定」ウィンドウから直接編集者にメッセージを送信できます。

ユーザーインターフェイスのデザイン

インタラクションスタイル:

直接操作/ウィンドウ スタイルのインタラクション:複雑で高度に設計された Web サイトとして、さらにオンライン パブリッシャーとしての目的を果たすため、HackerNoon は主にウィンドウ スタイルのインタラクションを使用します。これは、ユーザーが主に 1 つのウィンドウ上でスクロールしてタスクを実行することによってサイトと対話するためです。および/または複数のポップアップウィンドウ。

さらに、ライターは執筆時に、希望やニーズに応じて記事のレイアウトを直接操作するオプションを利用できます。

ただし、他の対話スタイル、具体的には次のような小規模な統合も行われていることがわかります。

• フォーム入力:このタイプのインタラクション スタイルは、記事を書いたり、ストーリーに追加情報 (TL、DR、概要) を追加したりするときに使用されます。これは、サイトの検索バーや、ログインまたはサインアップ情報の入力にも使用されます。さらに、ライターがプロフィールの情報を更新または記入したい場合にも使用されます。

  
  

• メニュー選択:このタイプの対話スタイルはナビゲーション バーに表示されます。具体的には、ユーザーが適切に移動して選択できるドロップダウン メニューです。

美学：

1. 全体的な美しさ:

ロゴとデザイン: 技術出版物としての Web サイトのデザインと全体的な美しさは、特徴的な緑色のモノクロ ディスプレイを備えたレトロな 8 ビット BBC Micro に似ています。サイトのデザインも、スキャンチューブ効果やピクセル化されたアイコンなど、同じレトロで古い技術の美学に従っています。

さらに、サイトの名前である HackerNoon にちなんで、レイアウト デザインもテレビに映るハッカーのコンピューター画面のように意図的に作られています。

書体:このサイトで使用されている書体は硬くて不格好で、技術出版物のテクノロジーの美学に適合しています。さらに、HackerNoon はデザインに独自の HackerNoon フォントも使用しています。コードのようにピクセル化して見えるように作成されていますが、エッジは滑らかです。私にとってこのフォントは、レトロな技術と現代性がうまく融合したものです。

ディスカッション:ブランドが目指している美学を考慮すると、HackerNoon はデザインの一貫性という点で正しい方向に進んでいます。ただし、サイトを意図的にレトロで混沌としたように見せたり、ホームページに多くの情報や記事を載せたりすると、たとえナビゲートが比較的簡単であっても、新規ユーザーはサイトに表示される情報の量に簡単に圧倒されてしまう可能性があるため、挫折する可能性があります。

2. ニールセンの 10 原則:ニールセンの 10 原則に基づいて HackerNoon インターフェイス設計を分析します。

   
   

• システムステータスの可視性: HackerNoon は、ユーザーに何が起こっているか、そして実行しているタスクの進行状況を示す読み込みアイコンを表示します。これは、ログイン/サインアップなどの基本的なタスクの途中、ライターが執筆のためにエディタをロードするとき、記事に画像をアップロードするときに表示されます。

  
  

• 現実世界とシステムの一致:技術出版物として、何百万人もの技術者をサイトに惹きつけている HackerNoon は、前述したようにレトロな技術の美学と一致しているだけでなく、サイトでは人々が認識できるだけでなくトレンドになっている単語やフレーズも多く使用しています。テクノロジー業界で。

  
  

• ユーザーの制御と自由: HackerNoon ユーザーには、ニュースレターや電子メールの購読または購読解除を選択できるため、大きな選択の自由があります。このサイトは、ライター向けの元に戻すおよびやり直し機能もサポートしています。さらに、ストーリーはエディターによって自動的に保存されるため、ライターは執筆中に進行状況を失うことがありません。

  
  

  これらにより、ユーザーはサイトの広告だけでなく自分自身の進行状況も制御できるため、より快適にサイトを使用できるようになります。

  
  

• 一貫性と標準: HackerNoon はログインおよびログアウト コマンドに標準化されたフレーズを使用するため、一貫性が優れています。 「書き込み開始」ボタンからもわかるように、ボタンはわかりやすく書かれています。ナビゲーション バーも同じ美学で構築されており、記事やホームページのヘッダーのレイアウト、フォント、色も一貫しています。

  
  

• 思い出すのではなく認識する: HackerNoon エディターで書くときは、明確な指示が表示されます (どちらかというと、エディターの各セクションにある小さな疑問符「?」を見つけてください)。さらに、ユーザーが HackerNoon について知っておくべきことをすべて記載したヘルプセクションもあります。

  
  

  

• エラー防止:サイトはユーザーの間違いを自動的に認識し、通知します。

  
  

  

  
  

• 柔軟性と使用効率: HackerNoon エディターを使用してライターが執筆する場合、キーボード ショートカットがサポートされているため、このサイトは柔軟で効率的です。その上、サイトのナビゲーション機能は新規ユーザーにとって非常にシンプルであり、誰もがすぐにサイトに慣れることができます。

  
  

• 美しくミニマリストなデザイン:上で述べたように、HackerNoon の美学はレトロな技術であり、新規ユーザーにとっては乱雑に見える可能性があります。ただし、すべてのレイアウトは意図を持って設計されているため、ユーザーはサイトの使い方をすぐに学ぶことができます。

  
  

• 認識、診断、回復: 404 エラー通知は、ユーザーが探している可能性のあるコンテンツを示唆することもあります。サイトはエラー メッセージだけを表示するのではなく、ユーザーの間違いを理解して、ユーザーが探している検索に戻るよう努めているため、これは賢明な行動です。したがって、これはユーザーとの信頼関係を築き、サイトの直帰率を下げる良い方法です。

  
  

  

  
  

• ヘルプとドキュメント:ナビゲーション バーにはユーザー向けのヘルプ セクションがあり、HackerNoon 専用に作成された機能は、その横にある疑問符の上にカーソルを置くと定義されます。

  
  

3. 柔軟性: HackerNoon は、ユーザーがパーソナライズのためのオプションを多数備えているため、優れた柔軟性を備えています。

• ユーザーは、情報、実績、ソーシャルメディア、さらには統計情報を追加して、自分の HackerNoon プロフィールをカスタマイズできます。これにより、ユーザーは自分について世界に見てもらいたいことを完全にコントロールできるため、HackerNoon コミュニティ内の人々間のつながりを作るのに適しています。

  
  

• ユーザーは、ナビゲーション バーの右端にあるブラシ アイコンをクリックして、ホームページの色をカスタマイズできます。これにより、HackerNoon の緑色が見にくいと感じる人が多いサイトの色の問題を解決し、ホームページの色をより落ち着いた色に変更することができます。

  
  

4. モバイルとデスクトップ:

デスクトップからモバイルに移行しても、HackerNoon の美学は一貫した色とレイアウトで変わりません。 Web サイトの要素はモバイルによく適応しており、ナビゲーション バーが右上隅の 3 つのダッシュになり、ユーザーがクリックすると完全なメニューが開きます。

さらに、ウィンドウと記事のサイズがモバイル レイアウトに合わせて変更されるため、モバイル デバイスでの HackerNoon の読書エクスペリエンスがデスクトップと視覚的に同じになります。

ただし、HackerNoon での執筆は多くの手順、ショートカット、カスタマイズを伴う複雑なタスクであるため、モバイルの Web サイトはデスクトップのようなすべての機能を満たすことはできません。したがって、ショートカット コマンド、見出しのカスタマイズ、フォント サイズ、画像の追加には制限があります。

したがって、HackerNoon の記事全体をモバイルで書くことはお勧めできません。

最近、HackerNoon は、ハンドヘルド デバイスでのユーザーの読書体験をより重視した公式モバイル アプリをリリースしました。

総合評価

全体として、HackerNoon は完全でバランスのとれた Web サイトであり、簡単にナビゲートできます。美的 (色、アイコン、書体) と学術的 (コンテンツ、単語、機能) の両方で対象読者に適合するように設計されています。

編集者が各記事を読んで公開可能かどうかを判断することで、サイトは読者のニーズや需要に合った質の高い情報を提供します。ライターに関しては、そうすることで執筆スキルと知識を向上させ、サイトを流暢に使用できるようになります。

タスクの複雑さは、2 つの主要なユーザー グループ間で合理的に配分されます。情報を読んだり検索したりするためにサイトにアクセスする一般ユーザーや読者にとって、情報や記事を簡単にナビゲートして見つけることができます。ライターにとって、タスクの複雑さのレベルは高いため、サイトの適切な使用方法を学ぶ必要があり、それは良い記事を作成するための基礎と理解できます。

インターフェイスのデザインに関しては、HackerNoon はその美しさに一貫性を保っていますが、レイアウトは多くの情報で構成されており、サイトのデフォルトの色 (明るい緑と黄色) は、新規ユーザーがサイトを認識する可能性があるため、妨げになると考えられます。圧倒的で複雑すぎる。

それ以外では、ユーザーはホームページの色の変更からプロフィールのカスタマイズ、フォントサイズや見出し、記事を書くときの画像の調整まで、あらゆるタスクでサイトを柔軟にカスタマイズできるため、HackerNoon はユーザー中心であると考えることができます。記事。

HackerNoon が優れているもう 1 つのユーザー中心の点は、よく整理されたヘルプ セクション/ブランド マニュアルから新機能の小さな定義に至るまで、サイトのあらゆる場所でヘルプが提供されることです。

さらに、ビジネスは電子メール広告やニュースレターに大きく依存しているため、HackerNoon ではユーザーが受信する電子メールを選択したり、電子メールやニュースレターの購読を完全に解除したりできるという事実も、非常にユーザー中心であると考えられます。