목차
오늘날 비즈니스 또는 조직의 웹 존재는 단순한 웹페이지 모음이나 멋진 앱 그 이상입니다. 본질적으로 소비자와 제작자 간의 기본 상호 작용을 대신하는 기능을 합니다. 그렇기 때문에 청중 및 목표 시장과의 상호 작용이 가능한 한 원활하게 진행되도록 하는 것이 매우 중요합니다.
사용자 인터페이스가 들어오는 곳입니다.
UI 디자인은 모양과 스타일에 중점을 두고 소프트웨어 또는 컴퓨터 장치에서 인터페이스를 만드는 프로세스입니다. 궁극적인 목표는 사용자가 사용하기 쉬운 디자인을 만드는 것입니다.따라서 좋은 UI 디자인은 사용자에게 좋은 첫인상을 줄 뿐만 아니라 잠재적 리드를 고객으로 전환하고 이후에 해당 고객을 유지하는 데에도 필수적입니다.
처음에는 어려워 보일 수 있습니다. 그래도 걱정하지 마세요! 사용자 인터페이스를 만들 때 기억해야 할 상위 7가지 사항 목록을 집계하여 정리했습니다. HCI(Human-Computer Interaction) 연구에서 직접 가져온 이 디자인 팁은 여러 산업 분야의 수백 명의 디자이너에게 효과적인 것으로 입증되었습니다.
이제 이 간단하고 직관적인 디자인 팁을 통해 다음을 수행할 수 있습니다. 마침내 사용자를 최우선으로 생각하십시오!
디자인 팁 #1: 사용자 파악 및 이해
무엇보다도 사용자가 누구인지 알아야 합니다. 당신은 그들을 알고 있어야합니다손등. 이것이 의미하는 바는 무엇인가요?
이는 분석 도구가 가져올 수 있는 모든 인구통계 데이터를 이해한다는 의미입니다. 물론 그것은 확실하지만 더 중요한 것은 사용자에게 필요한 것이 무엇인지, 목표를 달성하는 데 어떻게 도움을 줄 수 있는지를 아는 것입니다.인터페이스 디자인을 시작하기 전에 디자이너는 사용자가 필요한 것을 얻고 사용자가 가능한 한 가장 효과적인 방법으로 목표를 달성하도록 돕는 역할이 무엇인지 철저히 이해해야 합니다. 연령, 성별, 소비된 콘텐츠 유형, 웹사이트에서 보낸 시간과 같은 핵심 인구 통계 속성은 모두 이러한 최종 사용자를 위한 UI를 디자인하는 최선의 방법을 결정하는 중요한 데이터 기반 정보입니다.
결과, 데이터 수집 및 분석을 시작하고 주저하지 말고 사용자에게 직접 연락하여 디자인의 우선 순위를 정하는 방법을 알아보세요.
디자인 팁 #2: 사용자가 선택된 인터페이스
사용자를 알게 되면 인터페이스를 디자인할 플랫폼을 선택해야 합니다. 전화입니까, 노트북입니까? 아니면 데스크탑? 아니면 Apple Watch? 그것이 무엇이든 디자인을 시작하기 전에 확인해야 합니다.
이것이 명확해지면 사용자가 실제로 인터페이스를 사용하는 방법을 정의해야 합니다. 사용자가 타이핑보다 터치 기술을 선호합니까? 그들은 보통 음성을 사용합니까?명령?
Tinder를 예로 들면 표시된 프로필에서 단순히 오른쪽이나 왼쪽으로 스와이프하여 UI가 일반적인 사용 편의성에 초점을 맞추고 있습니다.
하지만 그마저도 가끔 잘못될 수 있습니다...
당연히 사용자가 인터페이스를 사용하는 방식을 인식하는 것이 중요합니다.
사용자는 직접(제품의 인터페이스 요소와 상호작용) 및 간접적인 두 가지 기본 방식으로 웹사이트 및 앱과 상호작용합니다. (제품 외부의 UI 요소와 상호 작용하여).직접 상호 작용이란 무엇입니까?
- 버튼 탭
- 화면 스와이프
- 손가락으로 항목 끌기
간접 상호 작용이란 무엇입니까?
- 키보드 명령/단축키 사용
- 마우스 또는 스타일러스로 가리키고 클릭
- 양식 필드 또는 문서에 입력
여기서 목표는 사용자가 누구인지에 초점을 맞추는 것입니다. 즉, 사용하는 장치와 해당 장치와 상호 작용하는 방식입니다. 최종 사용자가 기술 능력이 제한된 노인이라면 스 와이프 기능이 없을 것입니다. 마찬가지로, 시간 소모를 줄이기 위해 키보드 단축키에 크게 의존하는 프로그래머나 카피라이터를 위해 디자인하는 경우 키보드 단축키를 통합하는 것을 잊지 말아야 합니다.
디자인 팁 #3: 명확하게 커뮤니케이션하고 기대치를 설정하십시오
앱이나 웹사이트에서의 모든 상호작용에는 결과가 있습니다. 원하는 경우 조치의 결과. 그게 뭐냐에 따라버튼은 버튼을 클릭하면 금융 거래, 위치 공유 또는 친구의 Facebook 사진에 재미있는 댓글을 남길 수 있습니다. 가능성은 무궁무진합니다.
그래서 UI의 각 구성요소가 정확히 어떤 역할을 하고 그에 따른 영향이 무엇인지 사용자에게 알리는 것이 중요합니다.
할 수 있는 몇 가지 방법
- 사용자가 이상적으로 원하는 것에 해당하는 버튼을 강조 표시합니다. 예를 들어 전자상거래 사이트의 "지금 구매" 버튼.
- 기호 사용. 휴지통으로 무언가를 삭제하거나 플로피 디스크로 항목을 저장하는 것처럼
- 색상을 사용하세요. 빨간색은 중요한 사항에 주의를 기울이거나 멈추도록 하는 반면 녹색은 "진행"을 의미합니다.
- 버튼에 대한 명확한 카피를 작성하십시오. 버튼이 무엇을 하는지 간단하고 간결하게 설명하십시오.
- 경고를 하거나 확인을 요청하십시오. "Are you sure"와 같은 문구는 큰 효과가 있습니다!
Twitter의 UI는 사용자가 "Tweet" 버튼에 끌리는 단순한 사용자 친화적 디자인의 예입니다
디자인 팁 #4: 요소 배치 및 크기
요소가 가깝거나 클수록 사용자가 요소를 클릭하거나 탭하기 위해 더 빨리 도달할 수 있습니다. 이것은 매우 간단합니다. 보기 쉽고 크면 사람들이 빨리 접근할 수 있습니다.
이는 HCI(인간-컴퓨터 상호 작용)의 원리인 Fitts의 법칙을 단순화한 것입니다."표적을 획득하는 데 걸리는 시간은 표적까지의 거리와 크기의 함수입니다."따라서 디자이너는 '클릭 타겟'을 크게 만들고 가장 적합한 위치에 효과적인 방식으로 배치해야 합니다. 또한 구매, 저장 및 공유와 같은 가장 일반적인 작업이 페이지에서 크고 눈에 잘 띄도록 해야 합니다. 제품을 보기 전의 작은 "지금 구매" 버튼은 아무 의미가 없습니다. 이러한 디자인 팁은 무엇이 중요하고 어디에 배치해야 하는지 아는 것을 강조합니다.
이제 사용자가 정보에 압도당하고 이러한 기술을 사용하여 프로세스를 안내해야 하기 때문에 이러한 UI 디자인 원칙은 매우 중요합니다. 공간이 부족하여 사용자가 잘못된 버튼을 클릭하게 할 수 있는 타이포그래피, 목록 및 메뉴에서도 매우 중요합니다.
상호 작용 모델을 항상 염두에 두십시오. 사용자가 세로로 스크롤하는 경우 큐와 요소를 효과적으로 제공하기 위해 이를 사용자 디자인 철학에 통합해야 합니다.
Vectornator로 만든 이 UI는 버튼 배치, 크기 및 색상의 효과적인 사용을 보여줍니다. 사용자를 안내합니다.
디자인 팁 #5: 인터페이스를 배우기 쉽게 만드십시오.
사용자가 한 번만 사용하면 배울 수 있는 것을 디자인하는 것보다 나은 점은 무엇입니까? 디자이너라면 사실상 아무것도 아닙니다.
단순할수록 단기간에 배우고 기억하기가 더 쉽습니다. 걸리지 않는다아직 많은 인터페이스 디자인이 이것을 해낼 수 없다는 것을 알아내는 과학자. 따라서 항상 사용자에게 제공하는 콘텐츠/정보를 회수 가치가 더 큰 작고 소화 가능한 덩어리로 분해하십시오. 가장 효과적이고 효율적인 디자인 반복을 찾기 위해 인터페이스를 사용하여 실험함으로써 이를 수행할 수 있습니다.
Tinder의 UI는 배우기 쉬운 인터페이스의 완벽한 예입니다.
우리는 모두가 Microsoft Word 또는 Excel을 열고 우리가 사용할 수 있는 수많은 강력한 도구를 보는 느낌을 알고 있지만 데이터를 입력하거나 입력하고 이러한 도구와 기술 중 일부만 사용하게 됩니다. 인기에도 불구하고 Word와 Excel은 우수한 UI를 설계하는 데 실패하여 사용자가 어디에서 어떤 도구를 찾아야 할지 몰라 당황하는 경우가 많습니다.
이로 인해 점진적 공개라는 현상이 발생했습니다. 이것은 고급 기능이 보조 인터페이스에 숨겨져 있는 경우입니다. 즉, 가장 유용한 도구만 쉽게 사용할 수 있고 쉽게 액세스할 수 있으므로 단순성이 증가합니다. 이것은 간결한 텍스트가 제품이나 기능을 소개하는 웹 사이트 홈 페이지에서 자주 볼 수 있으며, 그런 다음 사용자가 더 읽을 수 있는 페이지로 연결되는 링크를 사용하여 안내합니다. 이것은 사용자 탐색이 항상 디자이너에게 시급한 과제인 모바일 디자인을 위한 모범 사례입니다.
디자인 팁 #6: 데이터 활용
꽤디자인이 전부는 아닙니다. UI가 아무리 미적으로 좋아도 데이터를 사용하여 최적화하지 않으면 예술적 디자인 재능이 낭비됩니다.물론 사용자 테스트, 연구, 설문 조사는 사용자 인터페이스 디자인에 대한 결정을 내리는 데 매우 중요하지만 새로운 기능의 신제품 출시 이후에 수집된 데이터는 매우 귀중합니다. 디자인 전략이 얼마나 효과적인지에 대한 신뢰할 수 있는 정보를 가지고 있기 때문입니다. 사용자가 홈 화면에서 제품 페이지로 쉽게 이동할 수 있습니까? 얼마나 많은 전환이 발생하고 있습니까? 재설계 구현 후 매출이 증가했습니까?
사용자가 웹사이트에서 취하는 행동, 행동 패턴, 세션 시간, 트래픽 소스 등을 모니터링하는 데 도움이 되는 도구가 부족하지 않습니다. 이러한 통찰력은 매우 중요하며 무시할 수 없습니다.
따라서 웹사이트에 분석을 설정하고 이러한 메트릭을 정기적으로 추적하고 해당 지식을 활용하여 더 나은 디자인을 하십시오!
디자인 팁 # 7: 피드백 제공
인간은 본질적으로 피드백을 받는 것을 좋아합니다. 비행기가 연착되고 항공사가 아무 말도 하지 않을 때 얼마나 화가 났습니까? 또는 주문을 추적할 수 없고 언제 도착할지 모를 때
디지털 인터페이스도 비슷하게 작동합니다. 사용자는 진행 상황과 진행 상태를 알고 싶어합니다. 페이지가 표시되는 이유를 모르면 짜증나지 않습니까?로드되지 않고 새로 고침을 눌러야 하는지, 장치를 다시 시작해야 하는지, 아니면 완전히 다른 작업을 해야 하는지?현재 진행 중인 업데이트로 사용자의 관심과 관심을 유지하세요. 로딩 아이콘을 사용하고 "다운로드가 완료될 때까지 5분" 또는 버튼을 누를 때의 애니메이션과 같이 소요 시간에 대한 시간 표시기를 제공하십시오!
또한보십시오: In With the Old: 고대 영어 글꼴로 디자인하기UI 디자인을 한 단계 업그레이드
이러한 디자인 팁을 통해 이제 사용자가 좋아할 놀라운 UI를 만들 수 있습니다!
Vectornator 는 그래픽 디자인 소프트웨어로 UI 생성 프로세스를 시작할 수 있습니다. 비즈니스, 디자이너, 학생 및 초보자의 요구에 맞는 벡터 기반 디자인 도구이며 모든 응용 프로그램에 대한 강력한 인터페이스를 만들 수 있습니다. 지금 Apple 기기에 Vectornator를 다운로드하고 영감을 주는 디자인 팁을 적용하세요
질문하고 피드백을 제공하고 아이디어나 디자인 팁을 공유해 주세요! 우리는 항상 커뮤니티 회원들과 소통할 수 있어 기쁩니다.
또한보십시오: 다크 모드: 고려해야 할 모든 장단점Vectornator를 즐겨 사용하신다면 앱을 평가하고 리뷰를 공유해 주세요. 우리 커뮤니티의 일원이 되어 주셔서 감사합니다! ❤️
