아무도 알려주지 않은 모바일 및 웹 앱 UI 디자인 트릭 12가지 – 지금까지
게시 됨: 2016-02-28[ Proto .io는 기업가와 스타트업이 실제 앱처럼 보이고 느껴지는 완전 대화형 사실적인 프로토타입을 만들기 위해 사용하는 모바일 앱 프로토타이핑 도구입니다.]
우리는 7명의 UI 디자이너, 개발자 및 기업가에게 모바일 및 웹 앱 UI 디자인 트릭을 어렵게 배웠거나 경력 과정에서 습득하게 된 것이 무엇인지 물었습니다. 아무도 이 팁에 대해 이야기하지 않았거나, 문제를 제기했을 때 아무도 모르는 것 같습니다. 어쨌든 시행착오를 통해 배울 필요가 없는 12가지 사항이 있습니다. 물론 이미 알고 있지 않다면 말이죠!
Duffy의 3가지 디자인 트릭
John Geletka는 30년 이상의 디자인 경험을 보유한 에이전시인 Duffy(@duffydesignx)의 디지털 전략 담당 부사장입니다. 그가 몇 년 동안 얻은 몇 가지 트릭이 있습니다.
2는 마법의 숫자가 될 수 있습니다.
“반응형 디자인으로 항상 모바일 세로(320px)와 데스크톱(1200px)의 두 화면을 한 번에 디자인하십시오. 프로세스가 훨씬 빨라집니다.”라고 Geletka는 말합니다.
베어 본 디자인으로 시작하십시오.
“처음에는 모든 기능, 종소리, 휘파람을 줄이십시오. 쓰레기를 치우고 앱의 목표에 집중하세요.”라고 Geletka는 말합니다. “즉, 처음에 디자인에 공유, 저장 및 모든 통합을 추가하지 마십시오. 핵심 아이디어를 확실히 내려놓으세요.”
펜을 집는 것을 두려워하지 마십시오.
"디지털 도구는 훌륭하지만 때로는 10분 만에 종이에 더 많은 작업을 수행할 수 있습니다."라고 Geletka는 말합니다. "시간이 촉박하거나 시간이 부족하면 종이를 사용하십시오."
이 웹 앱 UI 디자인 트릭으로 균형을 이루세요
Brandon Termini는 "의도적으로 아름답고 유쾌한" 웹 앱 UI 디자인 및 디지털 제품을 만드는 데 전념하는 대행사인 Handsome(@HandsomeMade)의 창립자이자 크리에이티브 디렉터입니다.
올바른 광학 추를 사용하십시오.
“성공적인 인터페이스를 만들 때 균형이 매우 중요합니다. 균형이 잘 잡혀 있으면 사용자가 의도한 대로 앱을 쉽게 스캔할 수 있습니다.”라고 Termini는 말합니다. “인터페이스에서 다양한 아이콘을 사용할 때 이 규칙이 가장 자주 위반되는 것을 봅니다. 일부 아이콘은 수평으로 더 가중치를 부여하고 다른 아이콘은 수직으로 더 가중치를 부여하며, 함께 모였을 때 균등하게 균형을 이루는지 확인하는 것이 우리의 임무입니다.”
광학 무게 및 재생 버튼
“재생 버튼을 디자인하는 경우 답은 원 안에 수평 및 수직 중앙에 등변 삼각형을 붙이는 것이 아닙니다. 물론 기하학적으로는 중앙에 있지만 삼각형은 높이가 더 크기 때문에 광학적으로 왼쪽에서 더 무겁게 느껴집니다.”라고 Termini가 말했습니다. "걱정하지 마십시오. 이 문제를 해결하기 위해 두 가지 작업을 수행할 수 있습니다. 삼각형을 약간 왼쪽으로 이동하여 눈을 속여 가운데로 보이도록 하거나 삼각형의 너비를 약간 줄여 모든 면이 균일하게 보이도록 합니다."
Web App UI 디자인에서 모바일로
다음 세 가지 모바일 및 웹 앱 UI 디자인 트릭은 Cramer-Krasselt(@cramerkrasselt)의 부사장 겸 사용자 경험 전략 이사인 Christian Dodd와 Creative Technology Director인 Nathan Koch가 제공합니다. Cramer-Kasselt는 Porsche, Corona Extra 및 Heinz와 같은 고객을 보유한 미국에서 두 번째로 큰 독립 광고 대행사이므로 Dodd와 Koch는 풍부한 경험을 바탕으로 다음과 같은 조언을 제공합니다.
모바일로 포팅할 때 웹 호버 상호 작용을 잊지 말고 설계 초기에 이를 처리할 명확한 계획을 세우십시오.
“데스크톱에서 호버 상태 뒤에 숨어 있는 콘텐츠는 모바일에서 여러 가지 방법으로 처리될 수 있습니다. 페이지에서 직접 처리하거나 터치 뒤에 숨깁니다. 모든 경우에 데스크탑 호버 이벤트를 처리하는 솔루션은 없습니다.”라고 Dodd와 Koch는 말합니다. “설명/유틸리티 콘텐츠는 종종 페이지에 표시되도록 뜨는 이점이 있으며 탐색 콘텐츠는 종종 터치 뒤에 더 의미가 있습니다. 일반적으로 사용자가 모든 장치에서 스크롤하는 것이 더 편해짐에 따라 호버 상태 및 숨기기/표시 위젯 뒤에 콘텐츠를 숨기는 것이 점점 덜 필요해지고 있습니다.
당신을 위해 추천 된:
인도 스타트업에 대한 반 영리 조항은 무엇을 의미합니까?
Edtech Startup이 인도 인력의 기술 향상 및 미래 준비를 돕는 방법...
이번 주 새로운 시대의 기술 주식: Zomato의 문제는 계속되고 EaseMyTrip은 Str...
인도 스타트업, 자금 조달을 위해 지름길 선택
디지털 마케팅 플랫폼 Logicserve, INR 80 Cr 자금 지원, LS Dig...
Lendingtech Space에 대한 갱신된 규제 조사에 대해 경고하는 보고서
모바일 웹에서 자동 재생 비디오를 작동시키려는 시도는 일반적으로 가치가 없습니다.
“모바일 OS 개발자는 이유가 있어 자동 재생을 허용하지 않습니다. 일반적으로 오디오와 비디오는 모바일 사용자에게 더 방해가 됩니다.”라고 Dodd와 Koch는 말합니다. "모바일 사용자는 미디어를 소비하기 위해 신중한 선택을 하는 데 익숙합니다."
반응형 디자인에는 브라우저를 축소하는 것보다 더 중요한 것이 있습니다.
Dodd와 Koch는 "기능 감지는 모바일 웹 개발에서도 중요한 부분입니다. "데스크톱 웹사이트에서 터치 이벤트를 추측할 수 없다고 생각하지 마십시오. 모바일 상호 작용의 세부 사항은 보이는 것보다 더 정교합니다."
3의 법칙에는 당신이 생각하는 것보다 더 많은 것이 있습니다
Karolyn Hart는 InspireHUB(@Inspire_HUB)의 최고 운영 책임자이자 시장에서 가장 초기의 엔터프라이즈급 모바일 웹 앱 중 하나인 IHUBApp의 창시자입니다.
모든 웹 앱 UI 디자인 요소를 세 그룹으로 유지하십시오.
“우리는 고객을 위한 인터페이스에 대한 신뢰를 구축하는 방법을 연구하면서 '3의 법칙'을 우연히 발견했습니다. 우리 플랫폼의 V1.0은 목표를 달성하지 못했습니다.”라고 Hart는 말합니다. “연구에 따르면 3은 자신감을 높이는 최적의 숫자입니다. 3명 미만이면 사람들이 확신이 서지 않고, 3명 이상이면 압도감을 느낍니다.”
"그래서 우리는 모든 것이 세 가지로 제시되어야 한다는 UX 과제를 만들었습니다."라고 Hart는 말합니다. 이 규칙은 우리의 도구를 변화시켰습니다. 우리의 백엔드는 디자인의 단순성을 수용하기 위해 매우 정교하지만 그만한 가치가 있습니다!”
단순하고 직관적인 제스처 유지
Jason Suriano는 Rocketfuel Productions Inc.(@TrajectoryIQ)의 설립자이자 CEO입니다. 모바일 및 웹 앱 UI 디자인에 대한 13년 이상의 경험과 Discovery Communications와 같은 회사를 위한 온라인 및 모바일 기반 프로젝트를 만든 Suriano는 꽤 많은 프로 팁을 얻었습니다. 그가 가장 좋아하는 것은 다음과 같습니다.
모바일에서는 모든 손가락이 서투른 것으로 가정합니다.
“모바일 게임을 디자인할 때 구현한 한 가지 트릭은 전체 시작 화면을 탭할 수 있는 영역으로 만드는 것입니다. 이것이 의미하는 바는 사용자가 시작 버튼을 탭하고 놓쳐도 앱이 계속해서 후속 게임 플레이 화면을 로드하여 사용자가 앱을 계속 사용할 수 있도록 한다는 것입니다.”라고 Suriano가 말했습니다.
"모바일 UI/UX는 탭, 두 번 탭, 스와이프 및 제스처로 정의되기 때문에 시작 화면과 같이 간단한 것을 잘못 설계하면 사용자가 당황하거나 좌절하여 홈 버튼을 누르고 앱을 종료해야 할 수 있습니다."라고 그는 덧붙입니다. .
새로운 웹 앱 UI 디자인 트릭에 열린 마음 유지하기
Nolan Kier는 NYC에 본사를 두고 있는 앱 개발 회사인 Messapps(@Messapps)의 프로젝트 관리자이자 비즈니스 개발 어소시에이트입니다. Kier는 "설립된 지 3년이 조금 안되었지만 Messapps는 이미 앱 개발 분야에서 가장 평판이 좋고 혁신적인 앱 개발 회사 중 하나로 빠르게 성장했습니다. 그 짧은 3년 동안의 디자인 트릭."
작업을 완료하는 새롭고 더 나은 방법을 계속 연구하십시오.
Kier는 "문제를 조사하거나 특정 개발 문제를 더 깊이 파고들어 어떤 해답을 찾을 수 있는지 결정함으로써 우리가 학습한 작업을 완료하기 위한 많은 트릭이나 새로운 방법"이라고 말합니다. “예를 들어 LaTeX에 새 코드 스니펫을 작성하여 멋진 문서를 작성하는 방법을 배우는 것이 포함됩니다. 이는 프로그래밍 스타일/포맷이 있는 텍스트 편집기와 유사합니다. 또한 MacOS용 Mathcad와 같은 Mathematica에는 사용자가 소프트웨어를 사용하여 어려운 3D 구성표를 생성할 수 있는 깔끔한 숨겨진 기능이 있습니다.”
Kierk는 "디자인의 경우 알파 채널 수정과 같은 작업을 사용하여 프레임을 압축하는 방법과 사용자 지정 알고리즘을 사용하여 개별 이미지를 압축하는 기능을 우연히 발견하는 것이 프로세스를 도운 작은 트릭이었습니다."라고 말합니다. “웹 앱 UI 디자인 및 개발 비즈니스에 참여하려면 기술의 발전에 발맞추는 혁신이 필요합니다. 결과적으로 우리의 디자이너와 개발자는 내부 및 외부 프로세스를 지속적으로 재작업하여 "바퀴를 재발명"하고 디자인 및 개발의 새로운 방법을 발견합니다."
함께 일할 적임자 찾기
Robert Pieta는 상황에 맞는 제안을 제공하는 스마트 iOS 키보드인 Porter Key(@PorterKeyboard)의 iOS 엔지니어이자 CEO입니다. 엔지니어이자 기업가로서 그의 가장 큰 조언은 다음과 같습니다.
개발자 디자이너 또는 디자이너 개발자를 찾습니다.
"양측 모두를 이해하고 경험이 풍부한 사람은 의사 소통 문제를 해결하고 프로젝트를 일정에 맞게 유지하는 데 도움이 될 것입니다."라고 Pieta는 말합니다. “여기에는 두 가지 주요 이점이 있습니다. 첫째, 디자인 및 개발 경험이 있는 사람이 커뮤니케이션 격차를 해소하는 데 도움이 될 수 있습니다. 디자인과 개발에는 모두 고유한 핵심 용어, 속어, 암시적 가정 및 핵심 테넌트가 있습니다. 두 세계를 모두 알면 커뮤니케이션 문제를 선제적으로 잡을 수 있다”고 말했다.
"둘째, 디자인 경험이 있는 개발자는 단일 개발자, 단일 디자이너 또는 제품 관리자보다 훨씬 더 잘 복잡성과 리소스 요구 사항을 예측할 수 있습니다."라고 Pieta가 덧붙입니다. “종종 작은 설계 변경으로 개발 시간이 크게 단축될 수 있습니다. 이것은 특정 디자인 패러다임이 사실상 미리 만들어진 모바일에서 특히 그렇습니다. 구현하기 쉬운 사용자 정의와 사용하기 쉬운 애니메이션을 이해하면 개발자와 디자이너 모두 프로세스를 즐기는 데 도움이 됩니다.”
Pieta는 "일부 기존 팀은 개발자 및 디자이너와의 스탠드업 미팅이 이러한 문제를 해결한다고 주장할 수 있지만 종종 그렇지 않습니다. 회의가 너무 짧아서 내재된 설계 가정, 이전 사용자 연구, 기존 코드 아키텍처 결정, 언어 선택 및 프로젝트를 정의하는 더 많은 선택 사항을 정확하게 탐구할 수 없습니다. 두 세계의 경험을 가진 사람만이 그 격차를 빠르고 효과적으로 메울 수 있습니다.”
그리고 우리가 제공하는 또 하나의 트릭: 올바른 프로토타이핑 도구를 사용하십시오
일부 모바일 및 웹 앱 UI 디자인 트릭은 가르칠 수 있고 일부는 경험을 통해서만 어려운 방법으로 배울 수 있습니다. 운 좋게도 오늘날의 디자이너와 개발자는 거인의 어깨 위에 자신의 전문 지식을 쌓을 수 있습니다.
[ Proto .io는 기업가와 스타트업이 실제 앱처럼 보이고 느껴지는 완전 대화형 사실적인 프로토타입을 만들기 위해 사용하는 모바일 앱 프로토타이핑 도구입니다.]