웹사이트 사용자 경험 3 요소: 대기 나 하지 마라! 날 생각 하 게 하지 않습니다! 나를 병 들 게 하지 마십시오!

중간 거래 SEO 진단 Taobao 게스트 클라우드 호스트 기술 홀

사용자 경험의 세 요소: 대기 나 하지 마라! 내가 생각 하지 마라!

날 기다려 하지 마십시오.

연구의 여러 사용자가 웹 페이지를 열고 시간 가장 만족된은 2-5 초, 10 초 이상 대기 하는 경우, 99%의 사용자가 페이지를 닫습니다 것입니다 나타났습니다. 아마도이 방법, 당신은 없을 것 이다 너무 많은 감정, 내가 다음, 데이터 집합을 열거: 400ms 느린, 0.59%; 사용자 검색 요청 결과 당 Google 웹 액세스 속도 아마존의 100ms 지연 웹 사이트 매출에서 1% 하락 귀 착될 것 이다; 야 후 400ms 지연 하는 경우 교통 5-9%에서 하락으로 이어질 것입니다.

어떻게 생각 하세요? 그것은 바로 테스트 작업을 수행 하는 시간?

이 시점에서 당신은 요청할 수 있습니다: 천천히 여 웹사이트 원인? 어떻게 해결 될 수 있다? 걱정 하지 마세요, 난 하나에 올 거 야. 다음의 몇 가지 기술적인 측면, 읽을 인내심 필요.

1, HTTP 요청의 수를 줄이기 위해

사용자가 웹 페이지를 열면 배경 프로그램 응답 사용자의 시간을 별로 사용자 대기 시간을 주로 다운로드 웹 페이지 요소, 즉 HTML, CSS, 자바 스크립트, 플래시, 사진 등, 통계 쇼, 각 추가 요소에 보낸다 웹 페이지 로딩 시간 (사용자의 대역폭)에 따라 25-40 밀리초로 증가 합니다.

그래서, 웹 페이지의 속도 개선 하기 위해, 우리는 HTTP 요청의 수를 줄이기 위해 필요, 3 가지 방법이 있습니다.

1 등심 사진 대신 CSS 등심을 사용 하 여 불필요 한 HTTP 요청을 줄일 수, 그림의 사용을 줄이고.

2 병합 파일, 텍스트 파일을 병합할 수 있습니다 콘텐츠 직접. 예를 들어 여러 개의 JS (자바 스크립트 약식) 파일 하나에 병합 되 고 여러 CSS 파일 하나로 병합 됩니다.

3 변경 되지 않은 페이지 요소 (예: 페이지 헤더, 꼬리말, 등)에 대 한 캐시를 최적화, 사용자는 다시 시간 다운로드하실 필요가 없습니다를 방문, 직접 브라우저에서에서 캐시는 그것을 읽고.

2. CDN (콘텐츠 전송 네트워크, 콘텐츠 유통 네트워크)를 사용 하 여

일련의 웹 서버 사용자는 네트워크에 얼마나 가까이에 따라 사용자 요청에 응답 하도록 서버를 지정 하는 지리적으로 다른 지역에 걸쳐 분산 된 CDN에 의하여 이루어져 있다. 귀하의 사이트 것 들의 많은 사진, 그냥 같은 거의 현재 전자 상거래 사이트, CDN를 사용 하 여 모든 CDN을 사용 하 여.

3, 압축 된 페이지 요소

작은 각 요소에는 웹 페이지, 더 적은 시간, 그것을 다운로드 하는 데 걸리는 잘 이해. 이제 더 성숙 하 고 웹 페이지, gzip, 실제로, 내 자신의 경험을 통해의 압축의 과정 일반적으로 70% 보다 더 많은 웹 페이지 텍스트의 콘텐츠를 줄일 수 있습니다.

4, 스타일 시트는 페이지의 헤드 섹션에 배치 됩니다.

이것은 또한, 사건의 실제 내 작업 페이지의 헤드 스타일 시트 (CSS 파일) 이동, 페이지 요소 순서 표시 되도록 페이지의 로딩 속도 높일 수 있습니다.

5, 페이지의 하단에 JS 파일

웹 페이지 열 때, 모든 요소를 순차적으로 표시 됩니다. 다른 요소에 비해 JS 파일의 특이성 때문에 완전 한 JS 파일 다운로드에서 매우 느리게 로드 됩니다, 그리고 순차 디스플레이의 다른 요소 차단 됩니다, 그래서 JS 파일 아래에 가능한 의미 내용을 신속 하 게 표시 될 수 있습니다.

6, 스타일 시트 및 외부 파일에 JS 스크립트

JS 스크립트 및 스타일 시트를 웹 페이지 HTML에 직접 작성 외부 파일 호출 수를 줄일 수 있습니다, 하지만 하는 그래서 페이지의 파일 크기를 증가 시킵니다. 전반적으로, 스타일 시트 및 외부 파일에서 JS 스크립트, 아마도 처음으로 사용자는 조금 느릴 것 이다, 하지만 후속 방문 사이트, 사용자가 브라우저의 캐시를 통해 직접 사용할 수 있습니다, 좋습니다에 대 한 HTTP 요청 수를 감소 시키기 위하여.

마지막 말에 작성:

여는 웹 페이지의 속도 높이 자주 간과 문제 중 하나는 응답입니다. 사용자를 위해 각 작업 해야 하는지 여부를 반환 결과 느린, 또는 빨리, 적절 한 응답, 가장 일반적인 예는: 사용자가 그림을 여는 진행률 표시줄의 비율 인지를 클릭은 전형적인 응답 디자인.

일류 웹사이트 사용자 경험이 아니다 확실히 하룻밤, 충분 한 사용성 테스트를 실시, 지속적인 개선을 사용자 피드백을 수집.

나를 생각 하지 마십시오.

사용자가 사용 하지 않을 사이트 사용자의 잘못이 아니, 그 것입니다 컴퓨터를 켜고, 키보드를 사용 되며 마우스, 것입니다 오픈 인터넷 브라우저 같은 단계 결국 귀하의 사이트에 도달 하 고 찾은 사이트는 엉망, 이해가 안, 무엇 그것은, 또한 사용 하는 방법을 배울 수 게으른 다음 점멸 하지 않고 귀하의 웹사이트를 닫습니다. 이것은 매우 현실적인 사용자의 행동 이다.

그들은 신속 하 게 사용자를 도달할 수 있다 연산자 얼굴 사이트 다음 중요 한 질문은 사용자를 유지 하는 방법?

귀하의 웹사이트를 잘 포장

당신은 1

우리는 사람을 식별 필요 모든 발가락을 머리에서 그를 기억 하는 세부 정보, 보이지 않는 그의 얼굴을 확인, 우리 사이트를, 동일한 이유를 식별 하는 경우 사이트의 로고는 얼굴. 로고 사용자가 쉽게 사이트의 모든 페이지에 탐색에 사이트는 누구 인지, 어떤 사이트 서비스를 제공 하는 것을 알 수 있습니다.

2. 어떻게 해야 합니까?

웹사이트 로고 뿐만 아니라 사용자에 게, 무슨 사이트 제공 하는 서비스, 쇼핑 사이트, 뉴스 사이트, 또는 소셜 네트워킹 사이트. 특히, 새로운 웹사이트에 대 한 명확한 진술 필수적 이다.

3. 어떤 혜택을 가져올 수 있는 당신은

이 사이트의 차별화 장점, 피어 경쟁 사이트에 비해, 장점, 수 및 아래 로고로 문장으로 "어떻게 당신은" 통합 귀하의 사이트를 사용 하는 사용자.

우리는 사용자의 첫 번째 단계를 유지 하기 위해 완료 사이트 포장의 재단 후, 다음, 우리는 사이트에 더 시도 만들기 위해 사용자가 원하는 수행 하는 방법?

둘째, 사용자와 그들의 작업에 초점을, 명확한 지침 제공

어떤 사이트를 방문 하는 사용자는 목적 이어야 합니다. 물건을 구매 하는 쇼핑 사이트, 방문 사이트는 뉴스를 보고, SNS 사이트는 이러한 목표를 달성 하기 위해 친구에 게 연락, 정보를 공유 하는 일련의 작업을 수행 해야 하는. 경우에 사용자는 이러한 작업, 작업의 매끄러운 완료를 완료 하는 데 가장 편리 하 고 빠른 방법이 될 수 있습니다 의심의 여지가, 사용자 확실히 유지 됩니다.

예를 들어 경우는 전기 사업 사이트 인지 거기 명확한 사이트 검색 기능 팁, 유연한 지불 결제 시스템, 뿐만 아니라 제품 분류 탐색, 눈길을 끄는 구매 버튼, 취소는 사용자와 그들의 작업 (온라인 쇼핑) 이들은. 따라서, 사이트의 디자인에 우리 부여 해야 합니다 사용자가 사용자를 신속 하 고 원활 하 게 다음 단계, 다음 단계에 마지막 작업 (주문 결제) 완료 될 때까지 눈길을 끄는, 명확한 작업 지침.

사용자는 자연스럽 게 접근 방식, 사용자, 실제로 매우 간단 하 고, 할 친밀 한, 조용히, 마음을 만족.

나 아픈 게 하지 마십시오.

사용자는 사이트 작업 효율은 매우 낮은 경우에, 게으른, 것입니다 과민성, 사용자에 게 좋아하고 나쁜 경험, 그리고 심지어 나쁜 단어-의-입으로 이어질. 거친 단어는 작업 수행의 어려움을 필요한 단계의 제곱에 비례 하 게 완료 경로 단축 하는 것은 좋은 사용자 경험입니다.

설명 하는 긍정적인 웹사이트 예제를 제공 합니다. 미국 아마존 제품 페이지를 입력 하면 방문 하지 스위치 제품 규격을 새로 고칠 수 있습니다, 예를 들어, 애플 노트북을 구입 하려는 제품 페이지를 열어 (모두 로그인 하려고), 바로 내가 할 수 있는 신속 하 게 전환 옵션의 버전이 될 것입니다 제품 컴퓨터 가격의 다른 구성 참조 단순히 상품 그림 위로 마우스를 이동, 가격 및 기타 정보가 자동으로 변경 됩니다. 이 인간 답게 된 디자인, 매우 높은 운영 효율성을 제공 하는 사용자의 여러 버전의 제품을 비교 하려면, 사용자가 자연스럽 게.

눈길을 끄는 하 고 가까운 대상 정보

문제 완료 경로 단축에 초점, 최적화 단계는 첫 번째, 때문에 우리가 먼저 사용자의 작업을 단순화 하려면. 다음, 우리는 포인팅 장치 (마우스 또는 손가락)의 궤적 및 작업 내 눈 움직임의 궤적을 최적화 해야 합니다. 피 츠 패 트릭 법 포인팅 장치를 사용 하 여 대상에 도달 하는 시간 다음 2 요인 관련:

1. 디바이스의 현재 위치와 대상 위치 사이의 거리는 짧은 고 소요 시간이 짧습니다.

2. 큰 대상의 영역 짧은 시간을 보냈다.

평 신도 측면에서 만약 우리가 통지 하거나 요소를 클릭할 사용자 (예: 텍스트, 그림, 단추, 등), 요소 하지 않아야 너무 멀리 포인팅 장치 (예를 들어 오른쪽에 화면)의 현재 위치에서 그리고 그것의 지역 충분히 큰 되어야 합니다. Web2.0 폭염 함께 웹사이트 디자인도 혁신의 시리즈는, 가장 큰 혁신 중 하나는 "미국에 대 한 큰", 큰 로고, 큰 그림, 큰 버튼, 그들은 뿐만 아니라 또한 더 많은 사용자 식별 및 클릭 더 많은 영향을 본다.

온유 하 고 시기 적절 한 알림

작업 과정을 단순화 하는 것 외에도 사이트는 때때로 그들은 그들의 작업을 완료 사용자에 게 도움과 지도 제공 해야 합니다. 일반적인 연습을, 그들의 작업을 계속 하려면 대화 상자를 닫습니다 사용자 필요 프레임 방법을 사용 하는 전에 거의 운영 효율성을 감소.

자신을 생각나 게 하는 가장 좋은 방법은 부드러운 방법으로 이동 하 고 예를 들어, 최소 중단을 잘라 해야: 사서함에 대 한 가입 때 사용자 이름을 확인 하는 가장 좋은 방법은 사용자 이름 사용할 수, 사용할 수 없는 경우 인지를 자동으로 쿼리를 제공 해야 제안 때 Tullo (당신은 시도에 로그인 할 수 있습니다 아주 잘, 할 yes.net 사서함 ) 。

사실, 작업의 효율은 감소 하는 때때로, 기능 디자인은 충분히, 또는 팁 및 제안을 충분히, 잘 처리 하지만 때문에 벼 락 공부를 강요 하지는 때문에 일부 사용자 싶지 않아 정보 또는 작업. 예를 들어 사용자 읽고 갑자기 뜬 부분, 읽고 싶은 사용자를 차단 하는 광고 기사, 어떻게 사용자가 아니라 짜증이 수 있습니다.?

비록 웹사이트를 운영 이익 중심, 하지만 너무 많은 하지 사용자 경험에 관심을 지불, 사용자 느낌을 무시, 음식 및 의류 부모 당신, 신중 하 고 사라 졌 어 요.

사용자가 실수 하는 경우 어떻게 해야 합니까?

우리가 모든 작업 최적화 후, 추가로 주의 필요로 하는 상황, 즉, 사용자는 자신의 실수를 만들 것입니다.

사용자 잘못, 그는 또한 매우 화가 될 때에, 그는 그 자신의 문제, 하지만 그래서 사용자의 오류 가능성을 최소화 하기 위해 사이트에 대 한 책임을 넣어 것입니다 생각 하지 않습니다.

예를 들어 사용자가 웹 사이트에 로그온 할 때 첫 번째는 사용자 이름을 입력 하는 것입니다 그리고 지금 가장 일반적인 사용자 사서함을 사용 하는 것입니다. 사용자 입력된 상자에 사용자 이름을 입력, 피할 수 없는 오류 발생, 1 편지 또는 1 자리, 쓰기 또는 잘못 된 결과 방문 해야 합니다 사서함 접미사 쓰기 가지 않습니다. 사용자가, 무엇이 가장 좋은 방법은 그들을 생각나 게 해야 화가 해야 합니까?

사용자가 사용자 이름을 입력 하면, 커서 잎 입력된 상자는 사용자 이름 등록 (사용), 사용자는 오류에 채우고, 예, 시간에 신호를 주어 야 하는 경우 웹사이트를 자동으로 확인 합니다: 사용자 이름이 존재 하지 않습니다, 사서함 형식은 하지 않습니다, 수 있습니다 사용자의 오류는

나에 게 또 다른 예는 비-웹 사이트의. 노트북 전원 코드 비틀 수 있습니다 고 노트북 나쁜 보증에 의해 포함 되지 않는 아마 지상에 떨어질 것 이다. Apple가 그것을 어떻게 보고, 애플을 자기 방식으로,이 오류, magsafe 전원 코드 및 노트북을 줄이고 전원 코드 외부에서 전원이 공급 되 면 자동으로 노트북에서 분리 MagSafe 라는 전원 커넥터를 발표 했다. 그것은 아주 친밀 한 디자인?

여기 나열 되지 않은 그러한 경우의 더 많은 예제 들이 있다.입니다. 주의 사항: 뿐만 아니라 사이트 처럼 사용자에 따라 달라 집니다 여부 그의 이점을 얻으려면 사이트의 사용 하지만 또한 사이트에 있는 그의 경험에 따라 달라 집니다, 그리고 모두 필수적인 사용자 값입니다.

원본 링크: http://jianshu.io/p/65934891ca45