Web For Final
Transcript of Web For Final
![Page 1: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/1.jpg)
Web 기획 , 사용자를 배려하는 생각 For _Final
clara
![Page 2: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/2.jpg)
contents
하나 , 주객 전도 주의
둘 , 사용자가 필요한 정보와 기능제공
셋 , 결제 서비스와 주문서 페이지의 중요사항
넷 , 중요정보는 한눈에 ,숫자 정보는 자동계산
생활의 즐거움 ,인터넷 쇼핑 / 예매
하나 , web writing 의 규칙
둘 , Labling 의 규칙
셋 , 용어사용의 규칙
쿨하게 전달하기 ,Web writing
![Page 3: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/3.jpg)
contents
하나 , web writing 의 규칙
둘 , Labling 의 규칙
셋 , 용어사용의 규칙
쿨하게 전달하기 ,Web writing하나 , 주객 전도 주의
둘 , 사용자가 필요한 정보와 기능제공
셋 , 결제 서비스와 주문서 페이지의 중요사항
넷 , 중요정보는 한눈에 ,숫자 정보는 자동계산
생활의 즐거움 ,인터넷 쇼핑 / 예매
![Page 4: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/4.jpg)
상품 정보 탐색( 가격비교 포털 , 쇼핑몰 ,
전문커뮤니티 )
구매처 & 조건비교(GS,,emart,,,)
쇼핑과정에서 쇼핑몰이 차지하는 비중
관심상품 발견
구매처 결정
상품 구매제품 선택
브랜드 선택구매량
구매시기결제방법
Non 쇼핑몰 영역 _80~90% 쇼핑몰 영역 _10~20%
주객전도 주의
![Page 5: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/5.jpg)
쇼핑몰 서비스의 핵심
상품구색
얼마나 다양한 상품을 판매하고 있는가
가격 경쟁력
같은 상품이라면 다른 곳보다 얼마나 저렴한가
주객전도 주의
![Page 6: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/6.jpg)
기본정보 외에도 추가 정보 제공
맥스무비 예매 서비스 _ 좌석 선택 + 좌석과 스크린 거리측정
사용자가 필요한 정보와 기능 제공
![Page 7: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/7.jpg)
예매 , 더 쉽고 좋은 방법의 추가 제공
바로바로 검색이 가능한 맥스 무비사용자가 필요한 정보와 기능 제공
![Page 8: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/8.jpg)
불필요한 확인사항 / 입력 항목의 복잡함 가중 결제 페이지의 스크롤 압박 결제의 복잡한 사항에 대한 안내 부족 쿠폰 / 적립금 / 제휴 포인트 사용 방식의 복잡성
온라인 결제의 가장 중요한 것 , 간결함
주문서 페이지의 간결화 + 결제 방법 안내 + 보안안내 제공
결제 서비스와 주문서 페이지의 중요사항
![Page 9: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/9.jpg)
정보 분산과 정보 확인을 위한 참조
중요정보는 한눈에 , 숫자정보는 자동계산
![Page 10: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/10.jpg)
숫자정보의 자동계산 제공
숫자 정보는자동으로 계산이 될 수 있어야 한다 .
중요정보는 한눈에 , 숫자정보는 자동계산
![Page 11: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/11.jpg)
contents
하나 , 주객 전도 주의
둘 , 사용자가 필요한 정보와 기능제공
셋 , 결제 서비스와 주문서 페이지의 중요사항
넷 , 중요정보는 한눈에 ,숫자 정보는 자동계산
생활의 즐거움 ,인터넷 쇼핑 / 예매
하나 , web writing 의 규칙
둘 , Labling 의 규칙
셋 , 용어사용의 규칙
쿨하게 전달하기 ,Web writing
![Page 12: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/12.jpg)
contents
하나 , 주객 전도 주의
둘 , 사용자가 필요한 정보와 기능제공
셋 , 결제 서비스와 주문서 페이지의 중요사항
넷 , 중요정보는 한눈에 ,숫자 정보는 자동계산
생활의 즐거움 ,인터넷 쇼핑 / 예매
하나 , web writing 의 규칙
둘 , Labling 의 규칙
셋 , 용어사용의 규칙
쿨하게 전달하기 ,Web writing
![Page 13: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/13.jpg)
간단한 문장과 내용요약 제공
좌우 페이지 넘기기
정독
책 읽기스크롤 이용
위 아래로 빠르게 훑어보기
스크롤 압박은 내용과관계없이 읽혀지지 않을 가능성 증가
웹 페이지 글 읽기
vs
간단한 문장단락의 구분
내용을 요약한 소제목
웹 페이지에서 제공해야 할 것
웹 라이팅 규칙
![Page 14: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/14.jpg)
이미지 / 도표 적극 사용간단한 도표를 이용한CJ 몰의 상품 평 안내
도표로 한눈에 볼 수 있는르노삼성자동차
웹 라이팅 규칙
![Page 15: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/15.jpg)
이미지 / 도표 적극 사용간단한 도표를 이용한CJ 몰의 상품 평 안내
도표로 한눈에 볼 수 있는르노삼성자동차
텍스트만으로 된 안내보다도표 , 이미지를 이용한 안내가
더 보기 쉽고 사용자의 눈길을 끈다 .
웹 라이팅 규칙
![Page 16: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/16.jpg)
같은 사항 , 내용의 다른 표현◦ 사용자들의 혼란을 가중 시킴
서비스 제공 관련 용어◦ 모든 페이지에서 통일◦ 정책이나 용어 변경 시 수정
일관성 있는 전달
웹 라이팅 규칙
![Page 17: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/17.jpg)
사용자의 감성 고려
웹 라이팅 규칙
![Page 18: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/18.jpg)
Labeling
사이트 곳곳에 적절한 이름을 정해서 붙이는 것
메뉴 이름 , 각각의 버튼등( 더 보기 , 채용공고 , Q&A 등등 )
정의
정보 탐색의 지름길네비게이션의 역할
해당섹션 , 콘텐츠의 대략적인 내용파악과 예측 가능사용자의 관심 집중
사용자의 이해도 증가
역할
레이블링의 규칙
![Page 19: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/19.jpg)
직관적인 이름 사용 _ 레이블링
비설명적 레이블링이 쓰여도 무리없는 사이트에서 특이한 레이블링 사용 가능
특이한 레이블링은 사용자의 혼란 야기
However, 사이트를 재미있고 테마에 맞는분위기로 전환가능 역할
레이블링의 규칙
![Page 20: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/20.jpg)
일부 속성을 표현하는 레이블링이 전체를 포괄하는 영역에 사용되지 않도록 주의
전체를 포괄하는 레이블링이 일부 요소만 가지지 않도록 주의
레이블링과 관련 있는 하위 메뉴 그룹핑
일부분이 아닌 대표성 표현
레이블링의 규칙
![Page 21: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/21.jpg)
누구나 알 수 있는 단어 사용
‘ 어트랙션’ 이라는사용자가 잘 사용하지 않는
단어보다는‘ 놀이기구’ 라고 사용하는 편이
더 사용자의 이해도를 높임
용어사용의 규칙
![Page 22: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/22.jpg)
영어나 외래어 사용의 절제사이트 ‘신라호텔’For KoreanBut Writing English
어매니티 라는 단어 사용대신객실사용 이라는 단어를 사용하는 것이더 사용자를 위하는 배려 !
용어사용의 규칙
![Page 23: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/23.jpg)
전문적인 용어에 대한 설명이 필요◦ 사용자를 더 배려하는 서비스
전문용어에 대한 안내와 설명
레이블링의 규칙
전자제품의 경우사용자를 위하여더 상세한 설명이 필요
LG 전자의 전문용어 설명 부재
![Page 24: Web For Final](https://reader036.fdocuments.net/reader036/viewer/2022062406/5588fa09d8b42af8678b46c9/html5/thumbnails/24.jpg)