특별한 웹 디자인 비평 : 새로운 Google+
어제 Google은 소셜 네트워크 인 Google+의 대규모 재 설계를 시작했습니다. 그들은 단지 몇 가지 대상을 뒤섞을뿐만 아니라 전체 시각적 경험을 완전히 재정의했습니다. 이러한 주요 업데이트는 웹 디자인 비평 시리즈의 스페셜 에디션의 장점입니다.
다른 사람들이 지루한 오래된 기능 목록에 대해 이야기하고 우리가 뛰어 들면서 우리와 함께하고 디자이너의 관점에서 무엇이 더 나은지 더 나쁜지 살펴보십시오. 인터페이스의 모든 부분을 골라 배워야 할 것이 있는지 살펴 보겠습니다.
디자인 리소스 살펴보기
향후 Design Critique에 웹 사이트를 제출하려면 몇 분이면됩니다. 귀사의 설계를 평가하는 데 49 달러의 비용이 청구됩니다. 컨설턴트가 귀하의 사이트를 살펴 보는 데 드는 비용보다 훨씬 저렴합니다! 자세한 내용은 여기를 참조하십시오.
오래된 Google+
새로운 디자인을 시작하기 전에 아래에 표시된 원래 버전의 Google+를 간단히 살펴 보겠습니다.
보시다시피, 많은 공백으로 인해 상당히 드문 경험입니다. 레이아웃은 검색, 사진 추가, 서클보기 등을 위해 상단을 따라 가로 막대가있는 컨텐츠를 3 개의 열로 구성합니다. 여기서 레이아웃은 실제로 Facebook의 현재 디자인을 연상시킵니다.
전반적인 느낌은 깨끗하고 단순하지만 약간 차갑고 비인간적입니다. 이로 인해 누구나 사이트를 쉽게 이용할 수 있었지만 페이지를 자신 만의 개인 커뮤니케이션 허브로 만드는 개념에는 큰 도움이되지 않았습니다.
새로운 Google+
새로운 Google+는 공백과 희소 한 느낌을 크게 줄입니다. 이에 비해 인터페이스에는 기능과 버튼이로드 된 것으로 보입니다. 그들은 강한 흰색 성격을 유지했지만 이것을 회색 음영으로 보완했습니다.
이것은 사소한 변경처럼 보일 수 있지만 실제로는 페이지에 강력한 시각적 계층을 만들려는 의도적 인 시도입니다. 이전 페이지가 위쪽을 따라 단일 회색 영역이있는 흰색 바다 인 경우이 페이지에서는이 두 가지 색상을 사용하여 컨텐츠의 기본 및 보조 부분을 명확하게 구분합니다. 페이지 주위에 눈이 뜨면서 인터페이스의 밝은 부분에 중요한 의미를 부여합니다.
나열한 것
이번에는 레이아웃이 훨씬 더 복잡합니다. 약간의 중첩이있는 이전 3 열 레이아웃의 수정 된 버전입니다. 두 개의 좁은 사이드 바가있는 넓은 메인 섹션이 여전히 있지만, 이 메인 섹션은 이제 두 개의 강력한 하위 열로 나뉩니다. 페이지의 모든 내용은 고정 된 위치에 있으며 주 내용 영역 만 스크롤됩니다.
모든 것을 제거하고 페이지의 뼈만 보면 상당히 복잡한 와이어 프레임을 볼 수 있습니다.
가장 중요한 개념 변경 중 하나는 이전 레이아웃에 왼쪽 아래의 세로 줄에 다양한 친구 서클이 있고 맨 위에있는 탐색 아이콘이 있고 새 레이아웃은 내비게이션을 아이콘의 세로 줄에 배치 한 것입니다. 왼쪽 아래에 원을 가로 질러 가로 막대로 표시합니다.
이 왼쪽 아이콘 기반 탐색 패턴은 Mac UI 디자인에서 매우 인기가 있으며 웹 인터페이스에서 미러링되기 시작했습니다. 이 형식의 가장 중요한 지지자 중 하나는 Mac 용 Twitter (이전의 Tweetie)였습니다. Reeder, Sparrow 및 Raven과 같은 앱에서 유사한 인터페이스를 생성했습니다.
새로운 Google+ 페이지에는 배울 단어가 있습니다. 왼쪽 아래의 스트립은 "리본"이며 다양한 "응용 프로그램"이 포함되어 있습니다. 기본 내용 상자는 "카드"이고 각 게시물 아래에 댓글, +1 등이있는 슬라이드 아웃 영역은 "활동 서랍"입니다.
정렬 문제
새로운 레이아웃은 Google+를 더욱 기능이 풍부한 응용 프로그램처럼 보이도록 먼 길을 가고 있으며 페이지의 중요한 부분을 강조하기 위해 대비를 잘 활용합니다. 나는 전체 레이아웃 스키마에 아무런 문제가 없지만 미적을 떨어 뜨린다 고 생각하는 정렬 문제를 알아 차릴 수는 없습니다.
우선, 기본 콘텐츠 상자와 행 아웃 버튼은 상단 스트로크를 따라 완벽하게 정렬 된 몇 픽셀 내에 있습니다. 불행히도, 나와 같은 nitpicker에게는 몇 픽셀이 떨어져 있습니다. 거의 일치하는 두 가지보다 나를 귀찮게하는 디자인 단점이 거의 없습니다 . 이 주제에 대한 자세한 내용을 보려면“디자인에서 왜 거의 말이 나쁜지”를 확인하십시오.
한 걸음 물러서서이 영역의 4 가지 요소를 모두 살펴보면 효과가 더 나빠집니다. 사용자 이메일 주소, 기본 콘텐츠 상자, 행 아웃 상자 및 알림 영역은 모두 임의 길이로 튀어 나와 배치의 논리가없는 것으로 보입니다.
이 예제는 고립 된 사건이 아니며 개체가 세로 또는 가로 정렬을 놓치는 경우가 몇 가지 더 있습니다. 아래 탐색으로 설정된 강력한 세로선에서 아래의 Google+ 로고가 어색하게 상쇄되는 방식을 확인하세요.
아이콘 디자인 : 단순한 것으로부터의 거리
역사적으로 Google은 디자인이 완전히 부족한 것으로 알려져 왔습니다. 출시 된 모든 제품은 상상할 수있는 가장 간단한 솔루션 인 것 같습니다. Google 브랜드 이미지는 2000 년대 초반 인기있는 광택 있고 고상한 웹 2.0 비주얼 스타일을 따르지 않고 콘텐츠 자체를 표현하는 것을 거부했습니다.
최근 몇 년 동안 Google은 제품이 미묘하지만 복잡성과 디자인 세부 사항이 증가함에 따라 Google이 이러한 아이디어와 천천히 거리를두기 시작했습니다. 새로운 Google+의 아이콘은이 개념의 완벽한 예입니다.
단순한 추상 모양과 단색이 미묘한 획과 그라디언트를 포함하는 집의보다 응집력있는 이미지에 어떻게 기여했는지 주목하십시오.
호버 효과의 반복
아이콘에 관한 주제를 다루는 동안 사이트의 사소한 상호 작용 측면, 즉 호버 효과에 대해 살펴 보겠습니다. 여기서 일반적인 테마는 아이콘이 회색이며 배경과 거의 대조되지 않는다는 것입니다. 그런 다음 마우스를 올리면 아이콘이 풀 컬러가됩니다. 사이드 바에서이 작업을 확인할 수 있습니다.
반복은 디자이너로서 가장 강력한 도구 중 하나이며 Google은이를 잘 활용하고 있습니다. 페이지 전체에 걸쳐 두 곳 이상에서 동일한 회색 효과가 반복됩니다.
그러나이 효과와 약간 일치하지 않습니다. 반복을 진행하는 것이 적절하다고 생각되는 몇 가지 지점이 있지만 그들은 다른 임의의 효과를 선택했습니다. 아래 예에서 아이콘은 마우스 오버시 버튼 모양으로 바뀝니다.
새로운 사이드 바
기본 콘텐츠 섹션의 오른쪽에는 Google+를 최대한 활용할 수 있도록 설계된 다양한 기능이 포함 된 새로운 사이드 바가 있습니다. 이것은 우리가 호버 트릭에서 색상을 볼 수있는 또 다른 장소입니다.
이 영역은 각 섹션이 명확하게 구성되고 명확하게 구성되어 있습니다. Google이 인기 주제 목록의 형태로 Twitter에서 아이디어를 선택하는 것을 보는 것은 흥미로운 일입니다. 사용자가 이미 해시 태그 구문을 채택하고 있음을 알 수 있습니다. 이는 개발자가 해당 동작을 설명하는지 여부에 관계없이 소셜 네트워크를 통해 자동으로 동작을 전송하는 방법에 대한 놀라운 예입니다.
사용자층의 행동을 면밀히 예측하고 관찰하는 것이 중요하며, 이를 변경하려는 시도보다는 중력 적으로 보이는 행동을 수용하는 것이 중요합니다. 이렇게하면 플랫폼이 훨씬 직관적이고 쉽게 채택 될 수 있습니다.
프로필
새로운 Google+ 프로필은 새로운 Facebook 타임 라인 플레이 북 (및 경로)에서 페이지를 가져 와서 기본 아바타 이미지뿐만 아니라 "표지 이미지"(Facebook에서 사용하는 것과 동일한 용어)도 허용합니다.
페이스 북에서 눈에 띄는 차이는 눈에 띄지 않는 거대한 프로필 사진으로, 왼쪽 대신 오른쪽에 있습니다. 실제 크기로 아래에 표시된이 이미지는 엄청나게 250px x 250px로 표시되며 이는 페이스 북의 125px 정사각형 프로필 사진과 정확히 일치하는 것은 아닙니다.
내가 흥미로운 점 중 하나는 표지 이미지가 실제로 주 내용 상자에서 나왔다는 사실입니다. 나는 디자이너가 의도적으로 이와 같은 예기치 않은 트릭을 뽑을 때 일반적으로 그것을 고맙게 생각하지만 솔직히 말해서 여기에 상당히 산만하다는 것을 알았습니다. 프로필 페이지가로드 되 자마자 내 눈이 어색한 겹침으로 넘어갑니다.
평결은 무엇입니까?
지난 달 현재 Google+는 활성 사용자의 1 억 명을 넘어 섰습니다. 인스 타 그램이 페이스 북에서 자사 플랫폼과 3 천만 명 이상의 사용자 기반을 위해 페이스 북에서 10 억 달러를 빼앗았다는 사실을 감안할 때 아무도 이것을 소수라고 부를 수는 없다.
또한 트위터에 1 억 6 천만 명의 활성 사용자가 있다고 생각하면 Google+가 소셜 미디어에서 2 위를 차지하고있는 것으로 보입니다. 그러나 이것은 페이스 북의 활성 사용자 기반과 경쟁하기에 충분하지 않습니다.
새로운 디자인은 Google이 과거에 다른 많은 사람들과 마찬가지로이 프로젝트를 포기할 의사가 없음을 보여줍니다. 그들은 확실히 당신을 유혹하고 당신을 다시 계속 더 즐거운 경험을 만들려고 노력하고 있습니다. 문제는 작동할까요?
이에 대한 답을 얻으려면 사람들이 Google+를 채택하지 못하게하는 요인에 대해 추측해야합니다. 분명한 대답은 이미 Facebook 계정이있을 때 Google+가 다소 중복되는 느낌이며, Facebook과 Twitter 모두에서 활동하는 경우에는 더욱 그렇습니다. 또 다른 가능성은 이전 Google+가 확실히 추한 것은 아니지만 약간의 무균 상태이며 성격이없는 것 같습니다.
새로운 디자인의 가능한 목표
이로부터 우리는 재 설계 뒤에 가능한 두 가지 가능한 목표에 대한 추측을 할 수 있습니다. 첫 번째는 Google+를 다른 소셜 네트워크와 차별화하는 것입니다. 자신의 게임에서 Facebook보다 단순히 더 낫다고 주장하는 것이 최선의 선택은 아니지만 Google 직원은 사람들이 왜 자신의 사이트를 방문해야하는지에 대한 분명한 개념적 초석을 설정해야합니다. 예를 들어, Twitter는 Facebook의 기능 복제를 피하고 대안이 아니라 고유 한 제품으로서는 훌륭한 일을했습니다.
두 번째 목표는 무균 상태를 줄이고 Google+를 탐색하기 쉽고 사용하기 쉬운 친근하고 친근한 장소로 전환하는 것입니다.
그들은이 목표를 달성 했습니까?
이러한 목표와 관련하여 디자인을 분석하면 성공 여부를 더 잘 측정 할 수 있습니다. 이 운동은 우리에게 무엇이 효과가 있고 무엇이 효과가 없는지를 찾기 위해 어둠 속에서 맹목적으로 찌르기보다는 비교할 분명한 포인트를줍니다.
첫 번째 목표에 이르기까지 Google은 일부 영역에서 약간의 진전을 보였으며 다른 영역에서는 약간 후퇴했습니다. 전반적으로 새로운 레이아웃은 이전 레이아웃보다 Facebook에서 훨씬 더 뛰어납니다. 한눈에, 어느 쪽의 충실한 사용자도 다른 하나를 착각하지 않을 것입니다. 좋은 일입니다.
또한 원형 필터를 상단에 배치하고 행 아웃에 계속 눈을 돌리는 것과 같은 작은 터치만으로도 Google의 몇 안되는 혁신이 전면 및 중앙에 있습니다. 이러한 진전은 새로운 커버 이미지와 같은 다른 영역과 대조를 이룹니다. 실제로 소셜 네트워크를 Facebook 복제처럼 느끼게 만듭니다. 나는 그들이 페이스 북의 새로운 형식을 빌리는 것이 아니라이 영역에서 독특한 생각을하는 것을보고 싶었다.
두 번째 목표는 디자인 새로 고침에서 주요 관심사 인 것 같습니다. 새로운 Google+는 더욱 매력적인 환경을 만듭니다. 어쩌면 이전 버전과 비교할 때 혼란스럽지 않을 수도 있지만 홈페이지에서 발생하는 모든 것들에 대해 더 강력한 서비스처럼 느껴집니다.
얼굴에 대한 강조가 많이 있습니다. 초대형 프로필 사진으로 시작하여 친숙한 얼굴로 가득 찬 큰 채팅 사이드 바가 표시되는 홈 페이지를 통해 계속 알고 있습니다. Google은 친구를 사귀고 떠나 갈 때 놓칠 수있는 경험에 빠져들기를 원합니다. 친구가 많다는 것은 더 많은 상호 작용을 의미하며, 더 많은 이유가 있습니다.
어떻게 생각해?
최근 몇 달 동안 Google+가 주목을 끌고있는 것 같습니다. 그러나이 인식은 실제로는 조용하지만 매일 활동적인 사용자 수가 인상적으로 꾸준히 증가함에 따라 결함이있는 것으로 보입니다. 그럼에도 불구하고 그들이 대중의 관심을 끌기 시작하더라도 새로운 디자인은 전체 웹이 다시 한번 그들에 대해 이야기 할 수 있도록 완벽하게 시간을 정했습니다. 이것이 새로 고침의 유일한 이유 였음에도 불구하고 보상이 될 것입니다.
그러나 위에서 설명한 것처럼 여기에서 더 깊은 목표가 이루어지고 있다고 생각합니다. 이제 내 생각을 읽었으니 이제 대화에 뛰어들 차례입니다. Google이 새로운 디자인으로 달성하려는 목표는 무엇입니까? 그들은 이러한 의도를 효과적으로 이끌어 냈습니까?
또한 Google+는 궁극적으로 Wave, Buzz 및 기타 실패한 사회적 시도를 방해 할 것입니까, 아니면 꾸준한 성장을 계속하고 웹에서 가장 중요한 소셜 네트워크 중 하나가 될 것입니까?