HackerNoon - 사용자 경험 분석: 2부

여기요! 오랜만이야. HackerNoon의 사용자 경험에 대한 대학 보고서를 작성한 사람은 여전히 저입니다.

이전 부분 에서는 다음을 다루었습니다.

1. 해커눈이란 무엇인가요?

2. HackerNoon 및 페르소나의 잠재적 사용자입니다.

3. 접근성 , 국제화, 인지 및 지각 문제 측면에 대한 HackerNoon 분석 .

   
   

두 번째 부분에서는 다음을 살펴보겠습니다.

1. 사이트의 가장 기본적인 기능 - 읽기 및 쓰기. 사이트 탐색 방법, HackerNoon 기사 작성 및 제출 방법.

   
   

2. HackerNoon의 웹 디자인과 미학에 대한 일반적인 이해와 분석도 제공됩니다.

콘텐츠 개요

• 과제 분석

  HackerNoon 검색

  HackerNoon에 글쓰기

• 사용자 인터페이스 디자인

  상호작용 스타일

  미학

• 종합평가

과제 분석

HackerNoon 독자:

주요 목표: 관심 있는 기술 관련 주제에 대해 읽고 배우는 것입니다.

인지 연습/목표 달성을 위한 단계:

1. 옵션 1:

   ㅏ. 1단계: hackeroon.com 웹사이트로 이동합니다.

   
   

   비. 2단계: 관심을 끄는 기사를 찾을 때까지 웹을 탐색하고 스크롤합니다.

2. 옵션 2:

   1단계: hackeroon.com 웹사이트로 이동합니다.

   
   2단계: 검색창에 관심 있는 주제를 입력하고 웹사이트에서 팔로우하고 읽을 스토리, 태그, 사람 목록을 탐색하세요.

   
   

3. 옵션 3:

1단계: hackeroon.com으로 이동

2단계: 탐색 표시줄 위에 마우스를 올려 놓고 자세히 알아보고 싶은 주제를 선택하세요.

옵션 4: 이 옵션은 일반적으로 해당 도메인에 대해 잘 알고 있는 일반 독자가 수행하는 경우가 많습니다.

1단계: hackeroon.com으로 이동

2단계: 검색창에 hackeroon.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의 DO와 DON'T를 따르는지 확인하고, 마지막으로 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은 최대한 "진짜"입니다. 온라인 출판물로서 읽기, 쓰기 등의 활동이 실시간으로 이루어지고, 매 시간마다 이야기가 제출되며, 일단 게시되면 모든 실제 인간이 접근할 수 있는 실제 정보입니다.

또한 사용자는 서로의 이야기에 댓글을 달고 실제 대화를 만들 수 있습니다. 또한 편집 검토를 위해 기사를 제출할 때 작가는 '스토리 설정' 창에서 편집자에게 직접 메시지를 보낼 수 있습니다.

사용자 인터페이스 디자인

상호작용 스타일:

직접 조작/창 스타일 상호 작용: 온라인 게시자의 목적을 충족하기 위해 복잡하고 강력하게 설계된 웹 사이트인 HackerNoon은 주로 창 스타일 상호 작용을 사용합니다. 사용자는 주로 스크롤하고 작업을 수행하여 사이트와 상호 작용합니다. 및/또는 여러 팝업 창.

또한, 작가는 글을 쓸 때 원하는 것과 필요에 따라 기사 레이아웃을 직접 조작할 수 있는 옵션을 가질 수 있습니다.

그러나 특히 다음과 같은 다른 상호 작용 스타일도 약간 통합되어 있음을 알 수 있습니다.

• 양식 작성: 이 유형의 상호 작용 스타일은 기사를 작성하고 스토리에 추가 정보(TL;DR, 요약)를 추가하는 데 사용됩니다. 이는 사이트의 검색창뿐만 아니라 로그인 또는 가입 정보를 입력하는 데에도 사용됩니다. 또한 작가가 자신의 프로필 정보를 업데이트하거나 작성하려는 경우에도 사용됩니다.

  
  

• 메뉴 선택: 이 유형의 상호 작용 스타일은 탐색 모음에 표시됩니다. 특히 사용자가 적절하게 탐색하고 선택할 수 있는 드롭다운 메뉴입니다.

미학:

1. 전반적인 미적:

로고 및 디자인: 기술 출판물로서 웹사이트의 디자인과 전반적인 미학은 시그니처 녹색 단색 디스플레이를 갖춘 복고풍의 8비트 BBC Micro와 유사합니다. 이 사이트의 디자인은 또한 스캐닝 튜브 효과와 픽셀화된 아이콘을 사용하여 동일한 복고풍의 구식 미학을 따릅니다.

또한 레이아웃 디자인은 사이트 이름인 HackerNoon과 관련하여 의도적으로 텔레비전에 묘사된 해커의 컴퓨터 화면을 표현한 것처럼 보이도록 만들어졌습니다.

서체: 사이트에 사용된 서체는 단단하고 투박하여 기술 출판물의 기술 미학에 적합합니다. 또한 HackerNoon은 디자인에 고유한 HackerNoon 글꼴을 사용합니다. 코드처럼 픽셀화되어 보이지만 가장자리는 매끄러워 보입니다. 제가 생각하는 글꼴은 복고풍 기술과 현대성을 잘 통합한 것입니다.

토론: 브랜드가 지향하는 미학을 고려할 때 HackerNoon은 디자인 일관성 측면에서 올바른 방향으로 나아가고 있습니다. 그러나 의도적으로 사이트를 복고적이고 혼란스럽게 보이게 만들고 홈페이지에 많은 정보와 기사를 넣는 것은 상대적으로 탐색하기 쉬운 사이트에도 불구하고 새로운 사용자가 사이트에 표시되는 정보의 양에 쉽게 압도될 수 있기 때문에 방해가 될 수 있습니다.

2. Nielsen의 10가지 원칙: Nielsen의 10가지 원칙을 바탕으로 HackerNoon 인터페이스 디자인을 분석합니다.

   
   

• 시스템 상태 가시성: HackerNoon은 로딩 아이콘을 표시하여 사용자에게 무슨 일이 일어나고 있는지와 수행 중인 작업의 진행 상황을 보여줍니다. 로그인/회원가입 등의 기본 작업 도중, 작가가 글쓰기를 위해 편집기를 로드할 때, 기사에 이미지를 업로드할 때 나타납니다.

  
  

• 현실 세계와 시스템의 일치: 수백만 명의 기술자를 사이트로 끌어들이는 기술 출판물인 HackerNoon은 위에서 언급한 복고풍 기술의 미학과 일치할 뿐만 아니라 사람들이 인식할 수 있을 뿐만 아니라 유행하는 많은 단어와 문구를 사용합니다. 기술 산업에서.

  
  

• 사용자 제어 및 자유: HackerNoon 사용자는 뉴스레터와 이메일을 구독하거나 구독 취소 할 수 있으므로 선택의 자유가 많습니다. 이 사이트는 작성자를 위한 실행 취소 및 다시 실행 기능도 지원합니다. 또한 작가가 글을 쓸 때 진행 상황을 잃지 않도록 편집자가 스토리를 자동으로 저장합니다.

  
  

  이를 통해 사용자는 자신의 진행 상황과 사이트 광고를 제어할 수 있다는 사실을 알고 사이트를 더욱 편안하게 사용할 수 있습니다.

  
  

• 일관성 및 표준: HackerNoon은 로그인 및 로그아웃 명령에 표준화된 문구를 사용하므로 일관성이 좋습니다. 버튼은 "쓰기 시작" 버튼에서 볼 수 있듯이 명확한 방식으로 작성되었습니다. 내비게이션 바도 동일한 미학으로 제작되었으며, 기사의 레이아웃, 글꼴, 색상은 물론 홈페이지 헤더도 일관됩니다.

  
  

• 회상보다는 인식: HackerNoon 편집기로 글을 작성할 때 명확한 지침이 제시됩니다( 있을 경우 편집기의 각 섹션에 있는 작은 물음표 "?"를 찾으십시오 ). 또한 HackerNoon에 대해 사용자가 알아야 할 모든 내용이 포함된 도움말 섹션이 있습니다.

  
  

  

• 오류 방지: 사이트는 사용자의 실수를 자동으로 인식하고 이를 알려줍니다.

  
  

  

  
  

• 유연성 및 사용 효율성: 작가가 HackerNoon 편집기로 글을 작성할 때 키보드 단축키가 지원되므로 사이트가 유연하고 효율적입니다. 게다가 사이트의 탐색 기능은 신규 사용자에게도 충분히 간단하며, 누구나 사이트에 빠르게 익숙해질 수 있습니다.

  
  

• 심미적이고 미니멀한 디자인: 위에서 언급했듯이 HackerNoon의 미학은 복고풍 기술이므로 신규 사용자에게는 복잡해 보일 수 있습니다. 그러나 모든 레이아웃은 의도적으로 설계되었으며 사용자는 사이트 사용법을 빠르게 배울 수 있습니다.

  
  

• 인식, 진단 및 복구: 404 오류 알림은 또한 사용자가 찾고 있을 수 있는 잠재적인 콘텐츠를 제안합니다. 오류 메시지만 표시하는 대신 사이트에서 사용자의 실수를 이해하고 원하는 검색으로 다시 안내하므로 이는 현명한 조치입니다. 따라서 이는 사용자와의 관계를 구축하고 사이트 이탈률을 줄이는 좋은 방법입니다.

  
  

  

  
  

• 도움말 및 문서: 탐색 모음에는 사용자를 위한 도움말 섹션이 있으며, HackerNoon용으로만 생성된 모든 기능은 옆에 있는 물음표에 커서를 놓으면 정의됩니다.

  
  

3. 유연성: HackerNoon은 사용자에게 개인화 옵션이 많기 때문에 유연성이 뛰어납니다.

• 사용자는 정보, 성과, 소셜 미디어, 심지어 통계를 추가하여 HackerNoon 프로필을 맞춤 설정할 수 있습니다. 이를 통해 사용자는 자신에 대해 세상에 보여주고 싶은 내용을 완전히 제어할 수 있으므로 HackerNoon 커뮤니티의 사람들을 연결하는 데 좋습니다.

  
  

• 사용자는 탐색 모음 아래 오른쪽 끝에 있는 브러시 아이콘을 클릭하여 홈페이지 색상을 맞춤 설정할 수 있습니다. 이렇게 하면 많은 사람들이 HackerNoon의 녹색 색상을 보기 어렵게 느끼기 때문에 사이트의 색상 문제를 해결할 수 있으므로 홈페이지 색상을 좀 더 차분한 색상으로 변경할 수 있습니다.

  
  

4. 모바일 대 데스크톱:

데스크톱에서 모바일로 이동하면서 HackerNoon의 미학은 일관된 색상과 레이아웃으로 변함없이 유지됩니다. 웹 사이트의 요소는 모바일에 잘 적용되었습니다. 예를 들어 탐색 모음은 이제 오른쪽 상단에 3개의 대시가 있으며 사용자가 이를 클릭하면 전체 메뉴가 열립니다.

또한 창과 기사의 크기가 모바일 레이아웃에 맞게 조정되므로 모바일 장치에서 HackerNoon의 읽기 경험이 데스크탑과 시각적으로 동일해집니다.

하지만 HackerNoon에 글을 쓰는 것은 많은 단계와 바로가기, 사용자 정의가 필요한 복잡한 작업이기 때문에 모바일 웹사이트는 데스크톱과 같은 모든 기능을 만족시킬 수 없습니다. 따라서 바로가기 명령, 제목 사용자 정의, 글꼴 크기, 이미지 추가에 제한이 있습니다.

따라서 HackerNoon 기사 전체를 모바일에서 작성하는 것은 권장되지 않습니다.

최근 HackerNoon은 휴대용 장치에서 사용자의 독서 경험을 보다 잘 반영한 공식 모바일 앱을 출시했습니다.

전체 평가

전반적으로 HackerNoon은 탐색이 쉽기 때문에 완벽하고 다재다능한 웹사이트입니다. 미학적(색상, 아이콘 및 서체)과 학술적(내용, 단어 및 기능) 모두 대상 고객에게 적합하도록 디자인되었습니다.

편집자가 각 기사를 읽고 출판 가능 여부를 결정함으로써 사이트는 독자의 필요와 요구에 맞는 고품질 정보를 제공합니다. 작가의 경우, 이를 통해 작가는 글쓰기 능력과 지식을 향상시키고 사이트를 유창하게 사용할 수 있게 됩니다.

작업 복잡성은 두 개의 주요 사용자 그룹 간에 합리적으로 배분됩니다. 정보를 읽고 검색하기 위해 사이트에 접속하는 일반 사용자 및 독자의 경우 정보/기사를 쉽게 탐색하고 찾을 수 있습니다. 작가의 경우 작업복잡도가 높기 때문에 사이트를 제대로 활용하는 방법을 배우도록 강요받는데, 이는 좋은 글을 만들기 위한 기초라고 이해할 수 있습니다.

인터페이스 디자인에 있어서 HackerNoon은 미학적 일관성을 유지하지만 레이아웃은 많은 정보로 구성되어 있으며 사이트의 기본 색상(밝은 녹색 및 노란색)은 신규 사용자가 사이트를 인식할 수 있기 때문에 방해 요소로 간주될 수 있습니다. 너무 압도적이고 복잡하기 때문이죠.

그 외에도 HackerNoon은 홈페이지 색상 변경부터 프로필 사용자 정의, 글을 작성할 때 글꼴 크기, 헤드라인, 이미지 변경까지 사용자가 수행하는 모든 작업에서 사이트를 유연하게 사용자 정의할 수 있으므로 사용자 중심이라고 간주할 수 있습니다. 기사.

HackerNoon이 잘하는 또 다른 사용자 중심 기능은 잘 구성된 도움말 섹션/브랜드 매뉴얼부터 새로운 기능에 대한 작은 정의까지 사이트의 모든 곳에서 도움말이 제공된다는 것입니다.

또한 이메일 광고와 뉴스레터에 많이 의존하는 기업으로서 HackerNoon을 통해 사용자가 수신할 이메일을 선택하거나 이메일/뉴스레터의 구독을 완전히 취소할 수 있다는 사실도 극도로 사용자 중심적인 것으로 간주됩니다.