요즘 웹에서는 화면을 꽉 채우는 사진을 배경과 함께 타이포그래피를 적절하게 배치하는 디자인이 유행하고 있습니다. 유명 웹 에이전시 사이트를 봐도 이런 디자인을 많이 찾아볼 수 있는데요.





이런 큼직한 디자인에서는 스크롤을 유도하는 UI가 자주 보입니다. 한편 브이텍스 랩(VTEX Lab)의 UI 디자이너 로드리고 뮤니즈(Rodrigo Muniz) 씨는 이런 스크롤 ui의 필요성에 대해 의문을 가지고 글을 썼습니다.




 


“당신이 그것을 설명해야 한다면, 그것은 작동하지 않는 것입니다.(If you have to explain it, it’ ain’t working)”라고 그래픽 디자인의 거장 밀튼 글레이저가 말한 적이 있습니다.


만약 스크롤을 유도하는 UI를 넣는다면 사용자의 인지하는 과정을 무시하는 것일지도 모릅니다. 사람들은 스크롤 하는 방법을 알고 있기에, 이 디자인은 사용자의 사용 패턴이 고려되지 않은 방식입니다.


뮤니즈 씨는 스크롤 UI를 넣는 것은 버튼에 “여기를 클릭해주세요.”라는 문구를 넣는 것과 같으며, 이것은 설명하는 것이지 디자인이라고 할 수 없다고 얘기했습니다. 이 UI는 사용자와 소통하는 것이 아닌 명령에 가깝다고 합니다.


그럼 스크롤 UI를 어떻게 대체할 수 있을까요?





Huge’s 리서치의 연구에 따르면, 만약 우리가 사용자의 인지하는 과정을 무시한다면, 사용자들은 컨텐츠를 못 보고 지나갈 수도 있다고 합니다. 스크롤 화살표는 좋은 결과를 얻었지만, 그것은 우리가 스크롤을 하라고 명령했기 때문이죠. 그것이 곧 좋은 사용자 경험은 아닙니다.



애니메이션을 추가하여 보여주는 방법


요소들에 애니메이션을 주면 사용자들에게 메인페이지 하단에 콘텐츠가 있다는 것을 알려줄 수 있습니다. 모든 상황에 적합하지 않겠지만 좋은 방법이라고 생각합니다.


하단의 gif 처럼 화면이 로드될 때, 하단에 콘텐츠가 잠시 보였다가 없어지는 방법입니다. 마치 사용자에게 궁금하면 스크롤을 내리라고 어필하는 것처럼 보입니다.



만약 여러분이 시차스크롤을 사용하고 있다면, 그것을 활용해 스크롤 작동과 함께 이미지를 줌인, 줌아웃 모션을 넣는 것도 괜찮은 방법이겠네요.



블록이 여러 가지라면, 순차적으로 모션을 넣는 것도 좋은 방법입니다.




숨기지 말고 바로 보여주는 방법



구글 핏 안드로이드 앱을 보시면, 메인 정보를 담고 있는 커다란 원 아래, 첫 번째 카드 영역의 일부가 보입니다. 이 접근 방식은 매우 직관적이고 간단합니다. 왜냐면 이 방식은 다른 요소에 의지하지 않고 사용자와 소통하기 때문입니다.  이 방식은 이미 2006년, 자레드 스풀(Jared Spool) 씨가 이미 얘기한 것입니다.


웹에서는 메인 사진영역을 CSS로 최고 높이를 90%를 설정하거나 자바스크립트로 통제한다면 어렵지 않을 것입니다.


이 방식에 애니메이션을 추가하고 투명도 값을 준다면 어떨까요? 이 방식은 메인이미지에 묻혀서 사용자의 주목을 받지 못할 수도 있습니다.




투명도 값은 조심해야 합니다. 만약 투명도가 너무 낮다면, 없는 것만 못할 수도 있습니다. 그리고 스크롤을 내렸을 때는 투명도를 100%로 돌려놓는 것을 잊지 마셔야 합니다.


간결하게 디자인한다는 것은 정말로 어려운 일입니다. 하지만 이런 스크롤 UI와 같은 간단한 해결 방법이 있는데요. 디자인하기는 쉽지만, 이것이 과연 필요한 것인가 생각해볼 필요가 있습니다.



출처: Medium User Experience Blog

by 원숭이 발자국

Posted by slowalk

가상현실(VR)은 존재하지는 않지만, 실제와 유사하게 만들어진 특정 환경 속에서, 사용자가 실제와 같은 외부의 자극과 반응을 통해 진짜와도 같은 경험을 할 수 있는 공간, 기술을 의미합니다. 가상현실의 몰입감을 위해 기술의 발전도 중요하지만, 가상현실의 경험에 대한 생각도 함께 발전하고 있을까요?

개인적으로 웹이나 모바일과는 또 다른 가상현실의 사용자 경험에 관심이 있는데요. 몰입형 가상현실 디자인에 대한 이해를 도와주는 미디엄 백채널(Backchannel) 블로그 글을 소개합니다.




1995년 미국, 3D게임기인 닌텐도의 ‘버추얼 보이’가 공개되었습니다. 불행히도, 게임 후 지속되는 붉은 잔상과 눈을 못 뜰 정도로 아픈 두통 때문에 1년만인 1996년 발매가 중단됩니다. 




버추얼 보이는 두 개의 선형 배열 각각이 진동하는 거울을 통해 플레이어의 눈에 전달되며 3D효과를 내는데, 이 거울이 게임기에서 웅웅거리는 소리를 나게 했습니다. 이 3D효과는 안구에 외상을 일으킬 수 있어서, 닌텐도는 15분 혹은 30분마다 게임이 멈추도록 옵션을 넣었습니다. 버추얼 보이는 진정한 몰입형 현실이라기보다 좌우 화면의 시차로 만들어진 3D효과였으며, 결과적으로 '버추얼'은 이름뿐인 2차원 게임이었습니다. 


15년이 흐르고, Oculus, 삼성의 Gear VR, 구글의 Cardboard, HTC Vibe, OSVR, 그 외 다른 많은 프로젝트와 함께 대대적으로 가상현실의 시대가 돌아왔습니다. 





지난 20년 동안 가상현실 기술은 굉장한 발전을 했지만, 가상현실의 경험에 대한 생각은 그렇지 않았습니다. 평면 스크린에 대한 디자인과 몰입 환경에 대한 디자인은 근본적으로 차이가 있습니다. Instrument사에서 가상현실을 시험할 때의 주요 포인트에 대해 알아보겠습니다.






1. 사람처럼 생각하세요.

사람은 전통적이고 본능적인 위험과 보상 신호를 이해하기 쉽습니다. 예를 들어, 가상현실 속 한 편에는 큰 구덩이가 있고 다른 편에 평탄한 길이 있다면, 실제로 위험하지는 않지만 여러분은 길을 택할 것입니다. 그 구덩이와 도로에 표지판이 있다고 생각해봅시다. 그 표지를 읽고 이해하는데 시간이 걸리게 됩니다.(인지 부하) 게다가 사람들은 많이 읽지 않으려는 경향이 있습니다. 따라서 사람들의 절반은 구덩이로, 나머지는 길가로 향할 것입니다. 





2. 관점을 이용하세요.

디자이너는 계층구조를 표현할 때, 크기와 대조, 색상을 사용합니다. 이런 도구들은 가상현실에서도 사용할 수 있지만, 약간의 차이가 있습니다. 크기는 사용자와 컨텐츠 사이의 거리를 기준으로 정할 수 있습니다.




컨텐츠는 일정 거리에 떨어져 고정되어있는 Heads-up 디스플레이와 같습니다. 



컨텐츠는 주위 환경에 고정될 수 있고, 사용자가 움직이면 그 컨텐츠에 대한 사용자의 관점도 변합니다. 



가상현실 세계 안에서, 컨텐츠는 자유롭게 떠다닐 수 있습니다.




3. 둘러보세요.

요즘은 도처에 즐길 거리가 많고, 사람은 자신의 몸과 머리를 돌려 움직이는 것에 익숙합니다. 그럼에도 불구하고, 디자이너들은 버추얼보이처럼 3D공간에 2D 방식을 적용하려 합니다. 





Cardboard나 Gear VR와 같은 가상현실 세트에서는 실제로 어떤 일이 벌어지고 있을까요? 
하나의 화면을  해상도가 반으로 나뉜 두 개의 화면으로 나눠 양쪽 눈에 각각 보여줍니다. 여러분의 눈은 이 영역의 가운데에 초점을 맞추기 때문에, 크기가 작고 낮은 해상도 영역으로도 문제가 없습니다.

이 작은 초점 영역을 일반적인 타일 메뉴를 사용한 몇 가지 옵션으로 해결할 수 있습니다.





1) Flat : 공간의 느낌이 없는 벽의 형태로, 일반적인 방식입니다. 원근법에 따라 글자나 이미지를 읽기가 어렵습니다.

2) Curved : 컨텐츠는 사용자를 휘어 둘러싸게 되며, 타일은 항상 사용자를 마주합니다. 글자와 이미지를 인식하기가 보다 쉽습니다. 

3) Less Content : 컨텐츠를 움직이게 하는 방식이 필요하지만, 컨텐츠의 양을 줄이는 것은 좋을 해결책이 될 수 있습니다.

4) Surrounded : 최선의 방법입니다. 초점의 중심에 가까운 정도로 계층구조를 나타낼 수 있습니다. 부수적인 컨텐츠는 화면에서 바로 밀려나지만 계속해서 접근이 가능합니다.


4. 사용 환경에 맞는 행동 유도성

일반적으로 UX디자인에서 사용되는 용어인 행동유도성(어포던스, Affordance)은, 기존에 알고 있는 사실이나 사물의 특성이 인간의 행동에 영향력을 미치는 현상을 의미합니다.  



웹을 예로 들면, 글자 링크에 마우스를 올리면 커서가 손모양 아이콘으로 변하는 것을 볼 수 있습니다. 이것은 사용자가 클릭 하면 페이지가 이동하거나 새 창이 열릴 것이라는 어떤 상황을 암시합니다. 마우스 뿐 아니라 트랙패드나 스타일러스로 해도 동일하게 손모양 아이콘으로 변하며, 그 어포던스가 바뀌지 않습니다. 사용자들도 같은 동작을 기대하는 것에 익숙합니다.

가상현실에도 무엇과 상호작용을 할 수 있고, 언제 그 상호작용이 일어날지를 나타내기 위한 어포던스가 필요하며, 그 어포던스의 감각적 표현은 스크린 어포던스와 같은 기술로 확장되어야 합니다.




5. 경험에 집중하세요.
가상현실은 몰입이 중요하며, 가상현실 환경의 디자인으로 사용자가 느끼는 실재감을 향상시키고 뒷받침할 수 있습니다.

- 빠른 움직임을 피하세요. 사용자를 피곤하게 만듭니다. 
- 수평선은 안정적으로 유지하세요. 가상현실에서 회전하는 수평선은 배 안에 있는 것과 같습니다.
- 빠르고 급격한 공간의 변환을 피하세요. 사용자가 방향 감각을 잃을 수 있습니다.
- 사용자의 머리나 몸을 너무 움직이게 하지 마세요. 사용자가 방향을 잃을 수 있을 뿐 아니라 헤드셋을 착용하고 있을 수 있기 때문에 몸을 돌리지 못할 수도 있습니다.
- 2D GUI를 3D와 혼용을 유의하세요. 조화로워 보이지 않을 수 있습니다.
- 현실에서와 같은 단서를 적절히 사용하세요.
- 밝은 화면은 사용자를 지치게 합니다.
- 의심스럽다면, 계속해서 테스트하세요.


우리가 세계를 경험하는 방식은 변화하고 있으며 앞으로도 큰 변화가 계속될 것입니다. 지난 20년을 돌아보면, AR/VR의 움직임은 인터넷을 포함한 20세기의 주요 패러다임의 변화와 같은 영향력이라 볼 수 있습니다. 경험을 디자인하는 것은 흥미롭습니다. 과거의 상호작용 모델에 얽매이지 않는다면 모든 것이 새롭다는 것이 문제이지만요. 시도도 실패도 할 수 있지만, 성공한다면 우리가 세계를 경험하는 방식이 바뀔 것입니다.




출처 : Backchannel


by 비숑 발자국


Posted by slowalk