분류 전체보기
-
Fitts' LawUX/10 UX-UI Laws 2021. 5. 25. 13:24
Fitts' Law 가끔 웹페이지를 탐색하다 보면, 광고버튼은 x 버튼이 엄청나게 작은 것을 발견하신적이 있으신가요? 해당 광고를 꺼야지만 내가 보고싶은 콘텐츠를 볼 수 있는데, 유독 잘못 누르게되어 원치않은 광고 페이지로 이동하신 경험을 해보셨을 겁니다. (관련 기사) https://news.joins.com/article/21533073 '광고 지우려다 클릭했어 ㅠㅠ'...'짜증유발' 광고에 개선 명령 방통위는 지난 4월 13~19일 5개 포털 사이트와 15개 온라인 쇼핑몰의 PC·모바일 인터넷에서 제공되는 플로팅(floating) 광고 실태를 점검한 결과 광고의 삭제를 제한하는 2개 업체에 대해 행정 지도를 news.joins.com 위사례는 사용자가 대상을 사용하기 까지 걸리는 시간이, 대상의 크..
-
Jakob’s LawUX/10 UX-UI Laws 2021. 5. 25. 00:30
Jakob’s Law 반복된 행위를 하면 어떻게 될까요? 점차 익숙해지고, 신경을 덜 써도 저절로 동일한 행위를 할 수 있습니다. 매일 출근하는 출근길, 양치질, 샤워 등 반복된 행위를 할 때 우리 뇌는 크게 신경을 쓰지 않고도 해당 과업을 잘 마칠 수 있습니다. IT제품에서도 마찬가지입니다. 브라우저에서 우측에 있는 닫기 버튼, 좌측 상단에 있는 뒤로가기 버튼, 앱에서 바텀 내비게이션 등 수많은 사이트, 앱들이 공통적으로 사용하고 있는 레이아웃, 구성들은 동일합니다. 이로 인해 사용자들은 정신적 노력이 줄어들면서, 인지 부하가 줄어들게되고 다른 목표에 해당 인지 부하를 더 사용하게 만들어 사용자에게 기대하는 바를 이루게 할 수 있습니다. 이러한 법칙을 제이콥스의 법칙이라고 합니다. ux전문가인 제이콥 ..
-
Responsive WEB - Axure Deep Dive#14Prototype/Axure Deep Dive 2021. 5. 23. 15:14
모바일, 태블릿 기기가 다양해짐에 따라서, 반응형 웹이 꼭 필요하게 되었습니다. 구글 검색 엔진에 노출이 잘 되기 위해서라도 각 사의 홈페이지들을 반응형으로 제작할 필요성이 있는데, 엑슈어에서도 반응형을 구현해보도록 하겠습니다. 일단 엑슈어에서는 기본적으로 적응형 웹을 제공하고 있습니다. 다만, 적응형 웹으로 작업 시 유저가 윈도우 창을 스스로 줄일 때, 설정한 break point에 도달 시, 해당 레이아웃을 바로 변환해서 보여 주기 때문에 매끄럽지 않는 부분이 있습니다. 적응형 웹에 대한 내용을 더 알고 싶으시면: https://ko.wikipedia.org/wiki/%EC%A0%81%EC%9D%91%ED%98%95_%EC%9B%B9_%EB%94%94%EC%9E%90%EC%9D%B8 적응형 웹 디자인..
-
Toast popup - Axure Deep Dive#13Prototype/Axure Deep Dive 2021. 5. 23. 14:28
Toast popup 앱을 사용하다보면, 즐겨찾기 토글 버튼 클릭 시 휴대폰 화면 하단 영역에 토스트 팝업이 생성되는 걸 볼 수 있습니다. 이번 포스트에서는 해당 토스트 팝업을 엑슈어로 구현하는 과정을 진행하고자 합니다. 매우 간단해서, 바로 적용하실 수 있습니다. 1. 다이내믹 패널을 활용해 즐겨찾기 버튼 생성하기 즐겨 찾기 버튼을 다이내믹 패널을 활용해서 디폴트와 셀렉티드 값을 지정해줍니다. 2. 즐겨찾기 버튼에 클릭 이벤트 설정하기 클릭시, 다음과 같이 인터랙션을 설정해 줍니다. 다이내믹 패널을 다음 패널로 설정하는 방법은 여러가지입니다. 간단한 작업에는 다이내믹 패널 자체를 잡고, 다음 패널 스테이트로 넒겨주는 명령과 함께, wrap from last to first 버튼을 클릭하면, 클릭 마다 ..
-
Repeater-Count - Axure Deep Dive#12Prototype/Axure Deep Dive 2021. 5. 23. 14:27
Repeater-Count 리피터를 활용하다보면 행의 전체 갯수를 세리거나, 선택된 행의 갯수를 세려야 할 때가 있습니다. 이때, 기본 인터랙션을 활용하여, 손쉽게 구현이 가능합니다. 리피터에는 다음과 같이 함수를 걸어줍니다. 리피터의 값이 로드될때마다 선택된 데이터가 0이 되게 하려면 맨 아래와 같이 설정해주시면 됩니다. 두번째로 나라에 해당하는 클릭 시 토글을 적용해주고, 셀렉하거나, 언셀렉할때 해당 값이 +1 또는 -1 되게 설정해줍니다. 이렇게 적용하면 다음과 같은 결과를 얻습니다. 프로토타이핑 주소 : https://tajy5v.axshare.com Untitled Document tajy5v.axshare.com
-
Rolling Banner(Auto & Click) - Axure Deep Dive#11Prototype/Axure Deep Dive 2021. 5. 23. 14:23
Rolling Banner(Auto & Click) fire event와 move의 조건문을 활용하여, 자동으로 롤링이 되면서 동시에 클릭도 되는 롤링배너를 만들었습니다. - 구현된 기능은 마지막 탭에 도착하면 롤링은 멈추었습니다. - 자동 롤링 도중에 좌측 탭 클릭 시 해당 부분부터 롤링이 시작됩니다. - 자동 롤링이 끝나면, 탭 이동시에도 롤링이 이뤄지지 않습니다. Tip) 탭부분은 Seletion Groups 과 Selected Style을 지정하면, 간단하게 구현이 가능합니다. 주요 인터랙션은 페이지 로드될때, 한영역이 일정 px 만큼 move 되면 좌측의 탭 부분이 selected 처리 되어야합니다. 이 부분은 다음과 같이 처리할 수 있습니다. 여기서 LVAR1은 숨겨진 테이블 전체 위젯을 말하..
-
Using Repeater02 - Axure Deep Dive#10Prototype/Axure Deep Dive 2021. 5. 23. 14:22
Using repeater 리피터를 사용한 2번째 작업은 많은 웹사이트에서 이미지에 마우스가 진입하면 나타나는 효과를 리피터를 활용하여 작업을 진행하였습니다. 리피터를 활용하면 코딩의 중복을 막는 것 처럼, 여러 위젯에 똑같은 작업을 할 필요가 없다는 점이 큰 매력이라고 할 수 있습니다. 작업전, 해당 예시를 사용하고 있는 웹사이트를 3개정도 파악하였습니다. 1) 네이버 메인, 2) 클래스101 메인, 3) 구글 아트 & 컬쳐 해당 사이트의 이미지에 마우스를 가져다 보시면, 해당 이미지가 미세하게 확대되는 기능이 있습니다. 상당히 많은 사이트에서 사용하는 기능인 만큼 활용도가 높을것으로 생각합니다. 오늘은 간단한 작업이라, 인터랙션 부분이 간소화 되어있습니다! 1) 첫번째 리피터 자체 인터랙션 부분은 다..
-
Using Repeater - Axure Deep Dive#9Prototype/Axure Deep Dive 2021. 5. 23. 14:21
Using repeater 교육업계에서 많이 활용하고 있는 전체 메뉴 LNB를 엑슈어의 리피터 기능을 활용하여 작업을 진행했습니다. 리피터의 기능과 pagename 이라는 기능을 활용하여, 각 페이지 진입 시 해당 버튼이 활성화 되게 만들었습니다. 리피터의 기능이 없다면, 지금과 같이 페이지가 많아 지는 경우, 각 페이지 로드시마다, 해당 위젯이 셀렉트되고, 나머지 위젯은 셀렉이 풀리게끔 작업을 진행해야 하는데, 엄청난 작업 공수가 진행됩니다. 예로, 보여드리면 1) 리피터를 사용하지 않는 경우 2) 리피터 활용시 이렇듯 엑슈어도, 많이 알면 알수록 더욱더 간결하고 효율적으로 작업을 진행할 수 있습니다. 함수에 대해 설명드리면, 리피터를 클릭한 후 아이템 로드 상태에서, 케이스를 나눠줍니다. 첫번째 케이..