프로젝트의 첫 단추이자 오늘의 과제_ UI 설계에 대해 좋은 방법에 대해 고민했다.
이거다 싶은 답이 바로 떠오르지 않았던 것은
교육과정에서 공교롭게도 Front-end관련 기술에 대해 학습한 것은 전무하다시피했기 때문이기도 하거니와
많은 인원들이 Back-end기능과 기술에 흥미를 느끼는 눈치이기도 했기 때문이다
때문인지, 어제의 프로젝트의 방향성에 대해 토론할때에도, 이런 UI에 대해서는
- 현장 적용이 가능하지만 간결한 Front-End 기술 적용
간결함에 대해 공감하며 최소한으로 하자는 의견으로 모아지기도 했다.
그러다 아침 운동을 하며 보기된 영상
UX(User eXperience) : 사용자의 경험은 사용자의 기분이 좋고 나쁨의 이상으로 이 프로그램이 사용자에게 어떻게 인식되며 재사용까지 이어지고, 타 프로그램과의 경쟁력이 될 수 있는 중요한 부분이라는 것을 다소 간과했던 것 같다.
이것은 비단 현란한 그래픽 디자인이나 동적인 움직임 이미지 편집의 기술적인 문제를 떠나
간결하더라도, 사용자에게 편리함과 종합적인 만족감을 줄 수 있는것에 대한 고민이 필요하다는 생각을 했다.
일단은 과제중에서, 거래기능 페이지에 한해
이전 참고페이지에서 ux가 개선된 페이지를 설계해보고자 고민했다.
나 어쩌면.. 프론트엔드 개발자가 하고 싶을지도...?
1. 방향성
- 가상화폐 거래 웹 사이트의 기능에 맞는 디자인에 대해 고민해본다.
- 가상화폐 거래를 이용하는 사용자의 눈높이를 고민해본다.( 연령, 성별, 소득 수준, 관심사, 취향은? )
- 가상화폐 거래시 중요한 정보로 인식하는 것이 무엇인지 고민해본다.
- 디자인적 요소는 어떤 것을 추가하면 좋을지에 고민한다.
2. 목표
- 레퍼런스 페이지를 참고해본다. 내가 느낀 UX관점의 장단점에 대해 분석한다.
- 사용자의 눈높이를 고려해 필요한 요소를 고민한다. 만족스러운 경험은 무엇이 있으며 이것을 위한 요소를 찾아본다.
- 타 분야(쇼핑 웹, 게임 등)에서 좋은 UX사례에 대해 조사한다.
위 내용을 반영한 과제_거래페이지의 UI를 작성한다.
3. 참고 페이지
4. 진행
4_1) 사례분석
레퍼런스페이지_ metaverse2 페이지 분석
장점
접속 환경 변화에도 이질감 없는 반응형 웹 (태블릿 환경에서는 다소 아쉬움..)
가상화폐 콘셉트에 맞는 미래지향적 이미지, 컨셉
단점
로드맵 - 현재 개선사항인지, 업데이트 예정인지, 반영은 되었는지 , 짧은 기간단위로 직관적이지 않은 채로 어려운 용어의 설명
지도 API를 이용한 가상의 부동산 거래 페이지,
위성지도를 사용하고 추가로 현재 보유 중인 사람의 국적을 표기하였는데, 때문에 로딩 시간이 길었고,
무엇을 표현하고자 하는지, 이것으로 수익이 일어날 수 있는 것인지 직관적으로 파악하기 어려웠다. 차라리 게임에 더 가까워 보였다.
P2P 거래 > 상품 리스트
종목별 이미지를 통해 무형의 자산을 시각화하였으나 종목별 간결한 설명을 통해 투자 전략에 대한 가이드를 제공했다면 더 좋았을 것 같다.(최근 변동성, 직전 3개월 평균 시세, 현재 시세, 최저가, 최고가 등)
구매창의 메인페이지
실시간 차트/ 최근거래내역/ 거래량/ 주문창 크게 크게 4가지 영역으로 나뉘어있었고
구매창의 경우 지나친 간결함으로 ux에 아쉬움을 주었다.
구매창을 통해 구매를 했을 때, 현재의 팝업창에 현재 시세 등의 정보를 명기하며 재 확인하면 더 좋을 것 같다- 재확인 없이 바로 구매 결정됨
. 코인원 페이지 분석
코인원(Coinone)
가상자산 거래는 쉽고 편한 코인원, 비트코인, 이더리움, 클레이튼, 실시간 시세, 디파이 서비스, 스테이킹, 락업, 디지털 자산관리 플랫폼
coinone.co.kr
메인 페이지
보다 깔끔하고 금융권 페이지의 분위기
채팅 기능
누적 수량에서 단위 시간 변경 가능,
타 종목을 시세를 즉각적으로 확인 가능한 영역
. 빗썸 페이지 분석
No.1 가상자산 플랫폼, 빗썸
국내 대표 가상자산 거래소 빗썸, 비트코인, 이더리움, 리플, 에이다, 클레이튼 등 쉽고 안전한 거래! 첫 가입은 3천만원까지 거래 수수료 무료
www.bithumb.com
보험사? 느낌의 명도가 짙고 대비 조의 색감을 사용하며 신뢰감을 강조한 느낌
메인 페이지
4개의 영역으로 가장 직관성이 뚜렷한 페이지,
많은 종목들 사이에서 TOP5 차트를 상단에 두어 사용자의 이목을 끔
거래화면을 설정할 수 있는 간단한 설정창과
해당 화폐의 정보를 볼 수 있는 비동기식 영역
거래 페이지 내, 라디오 버튼이나 슬라이드 바를 이용한 고객 편의 기능 제공이 인상 깊음
편의성관련 참고할만한 영역이 많음
4_2) 사용자의 관점에서 생각한 만족스러운 UX에 대한 고찰
- 금융거래가 일어나는 페이지이므로 보안성이 강조
- 실시간 가격변동이 일어나는 가상화폐거래인만큼, 처리는 빠르고 간결해야 한다.
- 정보는 사용자의 의사결정을 도울 수 있지만, 한 화면의 지나친 양의 정보는 사용자의 의사결정에 방해가 될 수 있으므로 깔끔한 배치에 신경쓴다
- 스크롤바, 버튼 등의 HTML 요소들을 활용해서 사용자의 이용에 직관성을 높이고 편의성을 향상할 수 있다.
- 거래완료시점의 알럿창을 통해, 거래 관련 정보를 추가하여 거래결과에 따른 내용을 고지한다
- 사용자의 연령(30~40)대를 고려한 이미지 등을 활용해 재미적인 요소를 높인다
4_3) 위의 내용을 바탕으로 한 거래페이지의 UI설계 적용
레퍼런스페이지의 거래창과 비교해
사용자의 편의성은 높이고
관련정보는 간결하게 표기하였다.
거래내역은 실시간 거래차트가 조회되는 페이지에서 크게 3가지 영역으로 나누며
실시간차트/ 최근거래-가격별거래/ 거래창(매수-매도-거래내역)
거래창의 경우 매수/ 매도/ 거래내역
모든 기능은 로그인 후 이용이 가능하므로, 비로그인접속시 거래창 하단에 로그인 버튼 존재하여 작동시 로그인 페이지로 이동한다.
차트 상단의 기간별 조회로 그래프가 변경되어 조회가능하고 휠조작으로 그래프의 변동조회가 가능하다.
매수창
로그인 후 매수주문을 하면, 주문에 대한 내용을 확인하고 매수를 진행한다.
매도창
매도 주문 확정시 수익율에 따라 수익금액 및 관련 정보가 표기된다.
거래내역
4_4 UI설계 후 해당 페이지에 들어갈 기능 정리
반응형웹 - 부트스트랩
화면 블랙/화이트 전환
실시간 거래 차트 확인 - API
15분/시/일/주/월 단위로 구별 가능한 그래프 표현 -api? ajax?
최근 거래 목록 - DB 반영된 내용 최근 N개 select
거래량 막대그래프 - 조건절로 가격순 count 그래프로 시각화 - react
구매/판매/거래내역별 비동기 방식 화면 전환 - ajax
보유자산 - select절
구매 개수 입력 , 최대 버튼, Placeholder의 주문금액표기 - 알고리즘으로 가능?
**채팅기능 - API ; 동글이
99. 필요한 기술
프로젝트 개발에 필요한 기술에 대해 기록
보안 관련
화면단 관련
'프로젝트 > 가상화폐거래_Teletubbies' 카테고리의 다른 글
| DB설계2_기능별 : 메인,커뮤니티 (0) | 2022.10.13 |
|---|---|
| DB테이블설계1_초안설계 (0) | 2022.10.12 |
| 10월11일(화)_UI설계 회의록 (0) | 2022.10.11 |
| 10/11(화)_UI설계2 (0) | 2022.10.11 |
| 10/9(일) _ 기획 (0) | 2022.10.09 |