웹앱 홈페이지 디자인 : 예제, 팁 및 피브
웹은 소셜 네트워크에 연결하고, 식료품 목록을 만들고, 큰 프로젝트를 관리하고, 차를 만들 사람과 상상할 수있는 다른 모든 미친 작업을 결정하는 데 도움이되는 앱으로 완전히 포화되어 있습니다.
이 모든 경쟁에서 앱이 건초의 속임수임을 방문자에게 어떻게 확신시킬 수 있습니까? 오늘 우리는 모방해야 할 전략과 피해야 할 전략을 배울 수있는 실제 사례를 살펴 보겠습니다.
앱의 홈페이지는 매우 중요합니다
웹 응용 프로그램을 만드는 데 많은 시간과 비용과 노력이 들었습니다. 산불처럼 잡을 수있는 최고의 벤처 기업입니다. 캐치가 하나뿐입니다. 사람들에게 시도해 보도록 설득해야합니다.
웹 앱의 성능이 아무리 뛰어나더라도 사람들이 "가입"버튼을 클릭하도록 유도하는 확실한 판매 전략이 여전히 남아 있습니다. 서비스가 완전히 무료이고 많은 기능을 제공하더라도 이러한 전환을 달성하기 위해 노력해야합니다.
사용자가 귀하의 홈페이지에 방문했다고해서 귀하가 제공해야하는 것에 진정으로 관심이 있고 더 나아 가기 위해 약간의 노력이 필요하다고 가정하지 마십시오. 승률은 그들이 어디로 향할 것인지에 대한 모호한 개념으로 연결을 따라 갔으며, 끌어 당기지 않으면 몇 초 안에 다른 사이트로 이동할 가능성이있는 섬세한 단계에 있습니다.
웹 앱 홈페이지는 가장 유용한 마케팅 도구 중 하나입니다. 무언가를 빨리 모으고 최선의 노력을 기울이려는 충동을 저항하십시오. 우리가 배울 수있는 몇 가지 예를 살펴 보겠습니다.
팁 : 디자인을 단순하고 메시지를 강력하게 유지
첫 번째 예는 Kroud라는 새로운 서비스에서 비롯된 것입니다. 접힌 부분 위의 사이트 부분을 살펴 보겠습니다.
이 페이지에 대해 내가 좋아하는 것이 많이 있습니다. 우선, 그것은 매우 간단하고 집중되어 있습니다. 서비스가 어떻게 당신의 삶을 변화시킬 것인지에 대한 빈 주장을 압도하거나 사이트가 무엇인지에 대해 덤불을 두드리지 않습니다. 잘 정의되지 않은 페이지보다 더 나쁜 것은 없습니다. 5 초 안에 앱의 기능을 알 수 없다면 계속 진행하겠습니다.
Kroud는 복잡한 서비스를 분명한 메시지로 연결하는 작업을 강력하게 요구하는“메시지 대화 형 FAQ 페이지를 몇 초만에 작성”하는 명확한 메시지로 만들었습니다. 이 줄은 페이지를로드 할 때 가장 먼저 볼 수있는 것 중 하나이며 사이트에서 수행하는 작업을 즉시 전달합니다.
큰 버튼
Kroud에서 배울 수있는 또 다른 것은 크고 대담한 가입 버튼이 좋은 것입니다! 여기 실제 크기의 Kroud 버튼이 있습니다.
이 버튼은 버튼을 누를 때 발생하는“Kroud 시작”과 보조 메시지“It 's free!”에 대해 매우 명확합니다. 이 버튼으로 크기뿐만 아니라 색상으로주의를 끌 수 있습니다. 다른 내용보다 훨씬 밝아서 눈을 즉시 끌 수 있습니다.
팁 : 스크린 샷은 필수입니다!
웹 앱 홈페이지에는 두 가지 주요 목표가 있습니다. 사람들에게 제품에 대해 교육하고 사람들이 제품을 사용하도록 유도하는 것입니다. 이는 지구상의 거의 모든 회사의 마케팅 및 광고에서 볼 수있는 것과 동일한 목표입니다.
새로운 코르벳 함을위한 잡지 광고 나 웹 사이트를 상상해보십시오. 그 페이지는 어떤 모습일까요? 백만 개의 가능한 디자인이 있지만 한 가지는 일정하게 유지 될 것입니다. 차를 보게 될 것입니다. Corvettes는 훌륭한 디자인의 유산을 가지고 있으며, 최신의 업적을 과시하는 가장 좋은 방법은 사진을 영광스럽게 보여주는 것임을 알고 있습니다. 스포츠카를 보지 않고도 누가 살 수 있을까요? 스포츠카가 코르벳이 아니라 아무도 들어 본 적이없는 경우라면 더욱 그러할 것입니다.
이것은 웹앱 홈페이지에 대한 은유로 작동합니다. 웹 응용 프로그램은 십여 개이며 아무도 당신에 대해 들어 본 적이 없습니다. 당신이 당신의 열악한 디자인 기술을 부끄러워하지 않는 한, 사람들은 가입하는 데 시간이 걸리기 전에 서비스가 어떻게 보일지 정확히보고 싶어 할 것입니다.
Freckle의 사람들은이 점을 잘 알고 있으며 5 개의 스크린 샷으로 페이지 상단을 선택했습니다.
이들 중 일부의 많은 부분이 다루어 지더라도 이미지 전체가 실제로 서비스 모습을 알 수 있습니다.
스크린 샷 기능
웹 앱 홈페이지 디자인의 현재 추세는 작은 아이콘으로 홈페이지의 기능을 과시하는 것입니다. 이것은 페이지의 미적 가치를 높이고 큰 사본 블록을 나누는 데 도움이되는 좋은 아이디어입니다. 다음은 Ballpark Invoicing의 예입니다.
아이콘이 텍스트보다 낫지 만 실제로 견고한 인터페이스를 사용하는 경우 스크린 샷이 훨씬 강력한 시각적 요소가 될 수 있다고 생각합니다. 스크린 샷은 서비스를 직접 전달하는 반면 일반 아이콘은 사용자가 볼 수있는 것을 추상적으로 표현한 것입니다. 주근깨가 자신의 기능을 설명하는 방법을 확인하십시오.
앱에서 이것이 어떻게 보일지에 대한 이미지로 여기 메시징이 어떻게 강화되는지 봅니까? 이것은 내가 점점 더 최근에보고있는 추세이며, 이전 세대의 웹 앱의 아이콘 아이디어를 진정으로 개선하는 것이 좋은 것이라고 생각합니다.
또 다른 예로 TodayPulse는 기본 스크린 샷의 세 가지 주요 기능을 스크린 샷의 가로 스트립으로 표시합니다.
Peeve : 스크린 샷 없음
스크린 샷은 매우 기본적이고 아무도이 알림을 필요로하지 않는다고 생각할 수도 있지만 실제로는 앱의 실제 모양에 대한 힌트를 제공하지 않는 수많은 웹 앱 홈페이지가 있습니다.
아래의 Wordfaire와 같이 이러한 페이지가 상당히 매력적이지만 미리보기를 볼 수 없기 때문에 시도 할 확률은 훨씬 적습니다.
이 속담에서“그림은 천 단어의 가치가있다”라는 구식 속담이 실제로 사실입니다. Wordfaire 홈페이지에서 7 개의 텍스트 단락을 읽을 수있는 방법은 없습니다. 다시 생각하지 않고 스크린 샷을 위해 적어도 5 개를 거래했습니다.
팁 : 사용자가 라이브 예제를 가지고 놀게하십시오
"구매하기 전에 시도"라는 개념은 판매원이 시작된 이래 존재했습니다. 제품이있는 한 지속될 수있는 간단한 개념입니다. 특히 불확실성이 관련된 경우에는 약속이 빨라진다. 사용자가 먼저 웹 앱을 사용해 보도록하여 불확실성을 제거합니다.
“구매 전 시도”는 무료 서비스에도 적용된다는 점을 명심해야합니다. 이것은 혼란스러워 보이지만 실제로는 매우 간단합니다. 무료 서비스조차도 내 시간을 소비합니다. 아주 귀중한 리소스는 아무 것도 거래하지 않습니다. 무료 웹 서비스에 가입하는 것은 여전히 약속처럼 느껴집니다. 제품이 마음에 들지 않으면 확실하지 않은 제품입니다.
이 개념은 간단합니다. 사용자가 단일 정보를 입력하지 않고도 앱의 펑크를 쫓아 다닐 수있는 방법을 만듭니다. 우리는 이것이 Pen.io에 대해 아래에서 실제로 작동하는 것을 봅니다. 이 페이지는 스크린 샷이없는 또 하나의 페이지이지만 예제 링크를 포함하여 조금 개선되어 서비스에서 얻은 것을 볼 수 있습니다.
다시 한 번 Pen.io에이 기능이 포함되어 있지만 Kroud에서 시험 페이지로 연결되는 링크가 미리보기로 강화되어 실행이 더욱 강력 해졌습니다.
Peeve : 긴 투어
일부 웹 앱은 10 분의 여행을 통해 서비스를 자세하게 설명합니다. 잘못 이해하지 마십시오. 정보가 좋으며 서비스 비용을 지불하면 서비스를 원할 것입니다. 그러나“제품 둘러보기”가 실제로 작업 집약적이어야합니까?
'투어 둘러보기'라는 링크를 클릭하면 실제로하고 싶은 것은 앱을 보는 것입니다. 우리가 실제로 시도해 볼 수있는 지점에 도달했을 때의 모습을 설명하는 2, 000 단어보다 훨씬 더 강하게 논의한 라이브 예제입니다. 일부 사이트는 프로세스를 안내하는 수정 된 "스마트"라이브 예제도 작성합니다. 이는 사용자가 서비스를 시험해 보도록하면서 요점을 파악하고 원하는 것을 볼 수 있도록하는 좋은 방법입니다.
다시 한 번 말하지만, 기능에 대해 불만을 표명하는 것은 나쁘지는 않지만 사용자가 그냥 뛰어 들어 자신의 생각을 볼 수 있도록하는 것이 중요하다는 것을 기억하십시오.
비디오 포함
웹 응용 프로그램을 과시하는 또 다른 아이디어는 홈페이지에 짧은 비디오를 포함시키는 것입니다. 그림이 천 단어의 가치가 있다면 초당 15-30 프레임의 1 분은 값이 없습니다! 동영상은 예제 및 스크린 샷과 동일한 목표를 달성하며, 자유 형식 테스트 환경보다 스크린 샷보다 역동적이고 구조화 된 경험 만 제공합니다.
Aviary는 복잡한 사진 조작을 만드는 이미지 편집기의 시간 경과를 보여줌으로써이를 잘 수행합니다.
내가 좋아하는 웹 앱 홈페이지 비디오의 구현 중 하나는 Greplin입니다. 여기에 페이지를로드하면 비디오가 팝업되지만 몇 초 후에 비디오를 시작하지 않으면 스크린 샷의 슬라이드 쇼로 바뀝니다.
Peeve : 앱을 보여주지 않는 만화
어떤 이유로 든, 지금 멋진 일이 재미있는 작은 만화로이 비디오 중 하나를 함께 던지는 것입니다. 이것은 종종 좋은 생각이지만 내가 가진 문제는 지루한 작은 애니메이션 2 분 후에도 여전히 앱이 실제로 어떤 것인지 전혀 모른다는 것입니다!
Minus와 Summify의 아래 두 비디오가 이에 대한 좋은 예입니다. 물론, 그들은 결국 당신에게 앱의 일러스트 버전을 거의 보여 주려고하지만, 마지막에는 아주 작고 추상적입니다.
결산 생각 : 성공을위한 레시피
이 기사의 모든 조언은 이미 논의한 교육 및 유혹과 같은 웹 앱 홈페이지의 두 가지 주요 목표를 목표로합니다. 먼저, 디자인에서 모든 혼란을 제거하고 방문자를 방해하지 않고 중요한 정보에 집중할 수 있도록 가장 중요한 요소로 정리하십시오.
메시징에서 앱의 기능과 용도에 대해 대담하게 진술하십시오. 우리는 오늘 후자의 요점에 대해 논의하지 않았지만 타겟 잠재 고객을 명확하게 식별하여 더 많은 전환을 얻을 것이라고 제안하는 강력한 주장이 있습니다. 예 :“MyCoolWebApp은 클라이언트 및 프로젝트 정보를 구성하는 것”보다“디자이너 및 개발자가 클라이언트 및 프로젝트 정보를 구성하는 데 도움이됩니다”. 또한 중요한 기능과 방문자가 앱을 사용해야하는 이유를 지적해야합니다.
메시지를 제곱 한 후에는 청중에게 제품을 소개하는 데 집중해야합니다. 이 작업을 수행하는 세 가지 좋은 방법은 스크린 샷 (스윙 할 수있는 경우 몇 가지), 라이브 예제 계정 및 비디오 둘러보기 (실제로 제품을 표시하는 종류)입니다. 그녀의 목표는 제품을 둘러싼 불확실성의 양을 줄이는 것입니다. 불확실성이 적을수록 가입 주저가 줄어 듭니다.
이것은 물론 당신이 양질의 제품을 가지고 있다고 가정합니다. 당신의 인터페이스가 절름발이이라면, 대중에게 숨기고 지루하고 긴 설명을 고수하십시오!
