코드스테이츠 블로깅 열번째 클론한 웹의 UI/UX

요번 코드스테이츠에서의 블로깅 주제는 피그마로 웹페이지를 클론한 사이트의 UI/UX 에대한 생각을 적는것이였습니다

 

UI / UX 란 ?

UI( User Interface : 사용자 인터페이스 )

• 사용자와 컴퓨터가 정보를 주고받기 위해 사용자와 프로그램이 상호 작용하는 프로그램의 일부분으로 사용자 인터페이스라 부릅니다.
• 핸드폰이나 컴퓨터 프로그램, 네비게이션 같은 전자 기기 등 시스템과 사용자 사이에서 의사소통을 목적으로 하는 사용설명서의 일종이라고 할 수 있습니다.
• UI의 핵심은 특별한 설명이 없더라도 누가 봐도 알기 쉽게 이용할 수 있도록 만든 보편적이고 직관적인 디자인이어야 합니다
• 그러나 모든 유저를 만족시킬수 없으므로 불만족을 최소화 하는 데에 촛점을 맞춥니다

UX ( User Experience, 사용자 경험 )

• 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험입니다
• 제품, 서비스 그 자체에 대한 경험은 물론, 홍보, 접근성, 사후 처리 등 직간접적으로 관련된 모든 경험을 사용자 경험이라고 할 수 있습니다. 
• 이런 사용자들의 경험을 분석하여 통계를 낸 데이터를 기반으로 사용자들의 불만족을 최소화하고 보다 편리하게 이용할 수 있도록 디자인 하는것을 말합니다.
• 즉 UI 를 기반으로 사용자들의 공감과 만족을 끌어내는 역할을 UX라고 할수있습니다

 

해야되는 과제는 UI  분석 , UX 분석 , 사용자 평가중 2가지를 선택하여 분석하고 블로그에 기록에 남겨야하는것입니다

 

요번 페어분과 선택한 과제는 UI 분석과 UX 분석입니다.

 

UI 분석 

• 사용중인 UI 디자인패턴
• 컬럼 그리드시스템 사용여부

 

UX 분석

• 피터모빌의 UX7요소 충족 여부
• User flow 그려보기

 

위의 2가지중 해야할것들이 요번 블로깅의 주제이며 저의 주관적인 생각과 페어분께서 생각하신 점들에대해 작성해보려합니다

 

클론 피그마 한 웹사이트 주소

https://appknot.com/

appknot

사용중인 UI 디자인 패턴

 

페어분과 웹사이트를 보며 디자인패턴을 사용한 종류는 3가지로 생각했습니다

1. 모달
2. 케러셀
3. 무한 스크롤

위 3가지를 생각하게된이유는 

1. 메뉴부분의 클릭시 모달이 위에서부터  내려오는점을 모달이라 생각했습니다
2. appknot 의 상단과 하단부분에 같은 정해진 패턴대로 오른쪽에서 왼쪽으로 계속 움직이는 패턴을 케러셀이라고 생각했습니다
3. 메인페이지에서 위에서 아래로 스크롤을 내릴때 하나하나의 구역을 전체를 보여주고 밑으로 내릴시 다음 구역을 로딩해 처음부터 마지막까지 다시 스크롤을한다면 다음의 구역을 처음부터 보여준다 생각해서   무한스크롤이라고 생각했습니다

컬럼 그리드 시스템 사용여부

 

그리드 시스템이란

그리드 시스템(Grid System)이란, 페이지 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 시스템을 말합니다. 여기서 그리드(Grid)는 사전적 의미로 '격자무늬' 또는 '격자판'을 의미합니다

 

컬럼 그리드 시스템이란 

실제로 컨텐츠를 포함하는 부분은 칼럼이라고 합니다.

칼럼의 넓이는 고정된 값으로 제공되며, 1개 이상의 칼럼이 조합하여 컨텐츠의 크기를 결정합니다. 그리고 하나의 칼럼 안에는 반드시 양 옆에 여백, 즉 거터를 동반합니다.

제가 생각하기에 컬럼 그리드 시스템은 반응형으로 작은화면이나 큰화면에 따른 화면의 변화를 예기하는것 같았습니다

 

 

피터 모빌의 UX 7 요소 충족 여부

https://insidelamp.tistory.com/manage/newpost/85?type=post&returnURL=https%3A%2F%2Finsidelamp.tistory.com%2F85 

https://insidelamp.tistory.com/manage/newpost/85?returnURL=https%3A%2F%2Finsidelamp.tistory.com%2F85&type=post

이전에 정리헀던 UI / UX 에서의 피터모빌의 UX7 요소가 충족되어있는지에 대해 생각을 남겨야 합니다

 

요번 페어분과 이야기를 진행하면서 서로 생각했던 관점이 틀렸고 덕분에 더많은 의견이 오갔던것같습니다

 

단, 실사용을 해보질않아서 대략적으로 보이는정도에대해 의견이 많이 오갔던것같습니다 

 

크게 나뉘자면 사용자에게 필요한 정보들이 존재하고 이 정보들에 대한 솔루션이 많다면 UX7의 요소가 전부 충족될것같지만 필요한 정보들이 없을경우 시간이 걸리고 검색이 힘들어 지니 UX7중 2~3가지만 충족할것같습니다 

 

1. 유용성(Useful) : 사용 가능한가?

 

사용자가 솔루션을 원할때 회사에서  원하는 솔루션의 제공해줄 데이터가 없다면 설문을 받아 제공해야하 하기때문에 유용하지않을것같고 원하는 솔루션 자료가 있다면 사용자에게 맞는 솔루션을 제공해줄수있을것같아서 유용할것같습니다

 

2. 사용성(Usable) : 사용하기 쉬운가?

 

위의 글과 마찬가지로 원하는 정보가 있다면 사용하기 쉽겠지만 원하는 정보가 없고 관심가지고있는 주제가 아니라면 사용하기 어려울것같습니다

사용자가 없는 주제에 대해서 솔루션을 원할시 이상적인 솔루션의 데이터가 없을것같아 바로 솔루션을 받지못하고 사용자들에게 설문을 받을때까지 기다령해서 오래걸릴것같습니다

 

3. 매력성(Desirable) : 매력적인가?

 

매인 페이지가 매우 깔끔하고 원하는정보에 대한 솔루션을 간편하게 볼수있어 매력적이라 생각하고 다른 주제에 대해서도 의견을 나눌수있을것같아 매력적으로 보입니다 

 

4. 신뢰성(Credible) : 신뢰할 수 있는가?

 

원하는 정보에대한 솔루션을 원할시 사용하시는  많은 분들에게 설문을 돌려 정보를 얻어 최상의 솔루션을 제공해주는 사이트로 알고있습니다 .

많은 분들에게 정보를 얻어 최상의 솔루션을 제공하는 회사이기때문에 신뢰할것같고 참여헀던 프로그램들이 많이 있다고 봐서 믿고 사용할것같습니다 

 

5. 접근성(Accessible) : 접근하기 쉬운가?

 

매력 부분과 비슷하게 웹사이트의 화면들이 매우 깔끔하고 복잡하지 않게 만들어져 있어서 접근성이 좋다생각하고 자유로운 토론이 가능할것같아 접근하기 좋을것같습니다

 

6. 검색 가능성(Findable) : 찾기 쉬운가?

 

네이버 블로그 및 인스타그램 , 유튜브등  운영하며 솔루션이 가능한  필요한 정보에대해서 궁금한게 있다면 접근하기 쉬울것같고 위의 정보가 없다면 문의해서 추가할수있다고 보여 찾기 쉬울것같습니다

 

7. 가치성(Valuable) : 가치를 제공하는가?

 

위의 종합적으로 볼때 내가 원하는 정보들이 있다면 매우 가치있을것같고 만약 없는 정보라 하더라도 설문이 가능한것같아 가치가 있을것같습니다

 

위의 판단은 실사용을 해보지않아 정확하지 않으며 개인적인 생각일 뿐입니다 

User flow 그려보기

위 사이트에서 제가 생각해본 User flow에 대해 만들어보았습니다