'분류 전체보기' 카테고리의 글 목록

분류 전체보기

매출을 60% 높이는 장바구니 버튼 디자인

장바구니 버튼이 보여지는 것만으로 매출이 60% 향상되었습니다. 한국 소비자는 구매 결정 요소 중 가격을 가장 중요하게 여깁니다. Oflara 사례 쥬얼리 판매 플랫폼 Oflara에서는 자사 내 사이트에서 고객들이 상품 썸네일에 마우스를 올렸을 때만 장바구니 담기 버튼이 보여지기 때문에 관심이 없을 것이라는 가설을 세웠습니다. 이에 따라, 장바구니 담기 버튼이 항상 보여지도록 수정하자 매출이 60% 향상했습니다. 애플의 경우에도 유사한 사례가 있습니다. 아래 그림처럼 장바구니 담기 아이콘을 제공할 때보다, 장바구니 담기 텍스트로 보여줬을 때 클릭률이 49% 증가했던 것입니다. 이와는 별개로 추가적인 통계를 하나 살펴보면, 최근 SAP 라는 통계 기업에서 조사한 내용에 따르면 한국의 온라인 소비자들은 쇼핑..

유저 액션을 부르는 모달 버튼 색상 UX

모달에서 액션별로 다른 색상의 버튼을 제공해야 합니다. 모달에서 할 수 있는 모든 액션을 고려해 버튼을 제공해야 합니다. 모달 버튼의 액션 사용자가 모달 에서 올바른 액션을 하도록 유도하려면, 버튼 색상에 유의할 필요가 있습니다. 모든 버튼에는 다음과 같은 세 가지 유형의 작업이 있습니다. 긍정적인 액션 : 정보를 변경, 전송, 또는 추가합니다. 중립적인 액션 : 아무것도 하지 않고 행동을 취소하거나, 사용자를 기존 화면으로 되돌립니다. 부정적인 액션 : 정보를 삭제, 재설정 또는 차단합니다. 모달 에서는 종종 이러한 작업이 조합된 상태로 제공됩니다. 따라서 유저가 액션을 구분할 수 있도록, 버튼 색상 대비가 필요합니다. 긍정적인 버튼 긍정적인 버튼 은 높은 명암차이를 통해 주목성을 높입니다. 또한 파..

색맹 사용자를 위한 버튼 색상 접근성

WCAG의 색상 대비 비율이 4.5를 초과해야 합니다. 접근성이 높은 버튼 접근성이 높은 버튼은 저시력 사용자를 위해 색상 대비가 높아야 합니다. 그리고 색맹 사용자에게도 많은 색상을 보여줄 수 있어야 합니다. 두 가지를 모두 충족하는 버튼 색상이 가장 접근성이 좋다고 볼 수 있습니다. 최적의 색조 가시 스펙트럼에는 많은 색상이 있습니다. 하지만, 최적의 색조를 찾기 위해서 이 분석에서는 동일한 채도와 밝기 수준을 유지하겠습니다. 색상 채도는 HSL 색상 시스템에서 80% 로, 밝기는 30% 로 유지됩니다. 가시광선 스펙트럼의 7가지 색상은 빨강 , 주황 , 노랑 , 초록 , 파랑 , 남색 , 보라 입니다. 색맹 사용자가 보는 색조가 가능한 한 원래 색조에 가까울 때, 최적의 접근성이라고 할 수 있습니다..

UX 디자인에 검정색(#000)을 사용하면 안 되는 이유

미국 성인의 58%가 컴퓨터 작업으로 눈의 피로를 경험했습니다. #000, #FFF 조합은 눈의 피로를 최대화합니다. 검정색과 눈의 피로 이 설문조사에 따르면, 미국 성인의 58% 가 컴퓨터 작업으로 인해 눈의 피로를 경험한 적이 있다고 합니다. 순수한 검정색(#000) 텍스트가 눈에 피로를 유발했기 때문입니다. 흰색 바탕에 검정 텍스트 흰색(#FFF) 바탕에 검은색(#000) 텍스트는 눈에 과도한 자극을 주게 되고, 눈은 밝기에 적응하기 위해 더 열심히 일해야만 하게 됩니다. 어두운 방에서 밝은 조명을 켤 때를 생각하면 어떤 것인지 이해하는 데 도움이 될 것입니다. 조명 조건의 급격한 변화는 우리의 눈에 자극이 되지만, 어두운 방에서 희미한 조명을 켜면 변화에 더 쉽게 적응할 수 있습니다. 위 그림과 ..

체크박스, 라디오버튼보다 클릭하기 좋은 칩

체크박스 및 라디오버튼을 칩으로 제공하면 클릭이 더 쉬워집니다. 칩 체크박스 , 라디오버튼 은 클릭 영역이 작아 클릭 또는 터치가 어렵습니다. 하지만 칩 에는 경계가 구별되는 더 큰 대상 영역이 있어 더 쉽게 선택할 수 있습니다. 체크박스 대체 체크박스 아래 그림과 같이 체크할 수 있는 영역과 레이블을 묶어 칩을 만들 수 있습니다. 선택된 항목은 컬러 등으로 강조합니다. 라디오버튼 대체 라디오버튼 은 컬러와 윤곽선으로 선택된 항목을 표기할 수 있습니다.

유저가 내용을 더 빨리 채우는 인풋필드 정렬

세로로 정렬된 인풋필드 레이블은 시각적 고정을 절반으로 줄입니다. 세로로 정렬된 인풋필드 레이블은 더 빨리 내용을 채우게 합니다. 인풋필드 정렬 일반적으로 인풋필드 는 다음 이지와 같이 가로 또는 세로로 레이블 을 정렬할 수 있습니다. 이 때, 유저의 시선은 다음 이미지처럼 놓여지게 됩니다. 따라서, 세로로 정렬된 레이블 은 1번의 시선만을 필요로 하지만, 가로로 정렬된 레이블 은 2번의 시선을 필요로 합니다. 또한 아래 그림처럼, 인풋필드 가 여러 개가 될수록 세로로 정렬된 레이블 시선 이동에 좋습니다. 가로로 정렬된 레이블 은 가로로 시선을 옮긴 뒤, 다시 세로 방향으로 시선을 옮겨야 하기 때문입니다. 따라서 세로로 정렬된 레이블 은, 시각적 고정이 절반만 필요하게 됩니다. 세로 정렬 인풋필드의 ..

파이썬 Pyautogui 검색결과 전체 웹 스크래핑

BeuatifulSoup으로 1분만에 웹 스크래핑 검색결과 스크래핑부터 진행이 어려운 경우, 아래의 글을 먼저 읽고 와 주세요. 파이썬 BeautifulSoup으로 1분만에 웹 스크래핑 브라우저 스크래핑을 진행할 때는 크롬 브라우저를 권장합니다. 아래의 공식 홈페이지에서 다운로드할 수 있습니다. 크롬 브라우저 다운로드 바로가기 태그 구성 HTML 태그에는 속성명 과 prd-space.tistory.com 검색결과 스크래핑 특정 요소 스크래핑까지 완료되었다면, 다음과 같이 검색결과 스크래핑을 진행할 수 있습니다. soup.select_one() 을 soup.select() 로 변경하여, HTML 전체를 스크래핑 할 수 있습니다. import requests from bs4 import BeautifulSo..

파이썬 BeautifulSoup으로 1분만에 웹 스크래핑

브라우저 스크래핑을 진행할 때는 크롬 브라우저를 권장합니다. 아래의 공식 홈페이지에서 다운로드할 수 있습니다. 크롬 브라우저 다운로드 바로가기 태그 구성 HTML 태그에는 속성명 과 속성값 이 있을 수 있습니다. 태그명 은 보라색, 속성명 은 주황색, 속성값 속성값은 파란색으로 표기되는 것이 기본입니다. CSS 선택자 CSS는 웹의 디자인을 위한 언어입니다. CSS 선택자는 해당 HTML 태그 또는 속성명, 속성값를 선택하는 것을 의미합니다. 웹 스크래핑을 위해 CSS 선택자를 사용하는 경우가 많으므로 아래의 표를 참고하여 활용하는 것을 권장합니다. 구분 설명 예시 태그 선택자 태그 이름을 선택 div, a, span, h1 id 선택자 개별 요소의 별칭 #id class 선택자 태그 그룹의 별칭 .cl..

파이썬 및 아나콘다 설치 및 설정

Python 설치 MacOS의 경우, 터미널을 열어 python 또는 python3 을 입력하여 실행하면 설치가 진행됩니다. 또는 아래의 공식 홈페이지에서 다운로드할 수 있습니다. 설치가 완료되면 터미널을 열어 print("hello") print(”hello”)를 실행하여 정상적으로 동작하는지 확인합니다. 파이썬 다운로드 바로가기 Anaconda Distribution 설치 아나콘다는 파이썬과 R 프로그래밍 언어의 자유 오픈소스 배포판입니다. 머신러닝이나 데이터 분석 등에 사용되는 여러가지 패키지가 기본적으로 포함되어 있어 세팅에 편리해지므로, 설치를 권장합니다. 다운로드 후, 터미널을 열어 conda --version 을 입력하여 버전이 출력되면 정상적으로 설치된 것입니다. 아나콘다 다운로드 바로가기..

모바일 웹 통계 로딩 속도 1초당 7% 이탈

페이지 응답이 1초 지연되면, 전환이 7% 감소합니다. 사용자의 47%는 웹 페이지가 2초 내에 로드될 것으로 기대합니다. 모바일 웹 사용 이 게시물에 따르면, 모바일 웹 사용자의 73% 가 로딩이 너무 느린 경험이 있다고 합니다. 또한, 51% 가 모바일 웹에서 크래시 또는 오류를 경험한 적이 있다고 말했습니다. 38% 는 아예 사용할 수 없는 모바일 웹을 경험했다고 말했습니다. 모바일 웹 로딩 모바일 웹 로딩에 대한 사용자 기대에는 정말 많은 가설들이 있습니다. 사용자의 47% 는 웹 페이지가 2초 이내에 로드될 것으로 기대했고, 단 3% 만 3초 이내에 로드될 것으로 기대했습니다. 만약 3초 이상 로딩이 걸리는 웹사이트를 마주하게 되면, 40% 의 사용자가 이탈했습니다. 로딩 속도와 전환 페이지 응..

웹 페이지 이탈 통계 88.5%가 로딩이 느려서 이탈

유저의 88.5% 로딩이 느리면 이탈했습니다. 유저의 73.1% 기기에 최적화되지 않은 디자인인 경우, 이탈했습니다. 웹 페이지 이탈 사유 GoodFirms의 조사에 따르면, 사용자 중 88.5% 가 로딩이 느릴 때 페이지를 이탈했습니다. 이는 디자인 관점에서 로딩을 하는 동안 관심을 끌어야 할 필요성을 시사하지만, 디자인만으로 관심을 끌 수 있는 시간은 매우 짧습니다. 또 다른 관점에서는, 사용자 중 73.1% 가 기기에 최적화되지 않은 디자인을 이유로 페이지를 이탈했습니다. 이를 통해 웹사이트 디자인이 여러 디바이스에 대응하도록 디자인하는 것의 중요성을 알 수 있었습니다. 또한 웹 사이트 구조를 이해할 수 있는 네비게이션이 별로일 때 61.5% 의 사용자가 이탈하기도 했습니다. 네비게이션은 웹사이트의..

앱 삭제 통계 39.9% 앱을 사용하지 않아서 삭제

앱 삭제 유저의 39.9%는 앱을 사용하지 않아서 삭제했습니다. 28.8%는 과도한 광고, 알림 때문에 앱을 삭제했습니다. 앱 삭제 사유 CleverTap의 설문조사 결과에 따르면, 사용자가 앱을 삭제하는 이유는 다음과 같습니다. a. 39.9% 사용하지 않아서 b. 18.7% 저장 공간이 부족해서 c. 16.2% 과도한 광고 때문에 d. 12.6% 과도한 알림 때문에 e. 5.4% 사용하기 어려워서 f. 5.4% 기술적인 문제가 있어서 g. 1.6% 기타 39.9% 사용하지 않아서 사용자는 앱에 귀속되거나 고정되지 않습니다. 이는 참여 및 유지 노력이 비효율적이거나, 가치 제안에 문제가 있을 수 있다는 것을 의미합니다. 만약 DAU 대비 MAU 비율이 감소하고 있다면, 향후 앱 삭제 증가에 대한 경고 ..

1 2 3

티스토리툴바