VKontakte 재설계. VKontakte의 새로운 디자인. VKontakte의 새로운 디자인이 흥미로운 이유는 무엇입니까?
새로운 디자인에 대해 쓰시겠습니까? 글쎄, 드디어!
!!! 주목!!! 일반적으로 저는 사용자로서뿐만 아니라 디자이너(웹 관련자 포함)로서 디자인을 평가하고, 디자인 자체뿐만 아니라 왜 그렇게 많은지에 대한 글도 많이 쓸 것임을 즉각 경고드립니다. 불만족. 그리고 많은 편지가 있을 것입니다!
왜 모든 것이 그렇게 특이한지에 관해서는:
4월 1일(모든 사람이 업데이트의 심각성에 대해 매우 의심하게 만들었음) 제한된 베타 테스트가 포함된 새로운 디자인이 공개되자마자 저는 즉시 VK 블로그로 가서 연결했습니다. 그 후 나는 모든 섹션을 살펴보고 무슨 일이 일어나고 있는지 살펴보기 시작했습니다. 첫날에 약 5개의 버그를 발견했고 즉시 수정을 위해 행정부에 보냈습니다. 수정되지 않은 유일한 문제는 논리적이라고 생각한다는 것입니다(예를 들어 커뮤니티나 피드에서 친구에게 이미지를 보낸 다음 앨범에 저장할 수 없다는 사실). 논리는 다음과 같습니다. 직접 보냈다고 하는데 왜 아껴두세요) 그런데 이건 과거 디자인에 있던 거거든요.
그 후, 나는 재설계에 대한 요약과 투표를 커뮤니티에 게시했습니다. 첫 번째 사용자가 어떻게 반응할지 흥미로워졌습니다. 대부분은 메시지의 토글 스위치(대화 상자 가장자리 위로 마우스를 가져가면 쉽게 찾을 수 있음)와 같은 일부 기능을 찾을 수 없다고 불평했습니다. 예, 이러한 인터페이스 요소는 최근 RuNet에서 발생한 모든 것에 비해 매우 이례적입니다. 그러나 이것은 새로운 디자인에는 문제가 되지 않습니다. 이는 최근 RuNet에서 등장한 디자인 사고(Design Thinking)의 문제입니다. 우리는 사용자가 UX 관점에서 보다 직관적이고 정확한 새로운 요소에 익숙해질 수 있도록 보다 편리해지고 원활하고 고르게 발전하는 진보적이고 좋은(!) 디자인을 거의 만들지 않습니다(사용자 경험은 인터페이스의 일부입니다). 사용자의 접근성과 편의성을 책임지는 디자인) 대신, 가장 진보적인 개발자들 사이에서 급격한 상승세를 보였으며, 이는 사용자 측에서 오해의 물결을 불러일으켰습니다. 그리고 이 모든 것은 불편하지만 단순히 친숙한 끔찍한 디자인을 가진 수많은 사이트를 배경으로 합니다. 그리고 웹 사이트는 일반적으로 저렴하게 만들어지거나 "이렇게 하는 방법"이라는 원칙에 따라 만들어지기 때문입니다. 잠재력이 있고 발전할 수 있는 사람들은 단순히 RuNet에서 제공되는 돈을 위해 일하지 않고 외국 사람들을 위해 훌륭하고 값비싼 일을 하러 갑니다. 이것은 모두 매우 슬픈 일이며 새로운 VK 디자인의 도입이 Rus의 세례와 유사한 이유입니다. 그러나 잠시 후 사용자는 이에 익숙해지고 상황이 어디에서 변경되었는지 기억하고 모든 것이 그렇게 나쁘지 않다는 것을 이해하게 됩니다.
"Facebook을 깎으면 적어도 다른 사람들의 좋아요가 없는 피드가 있습니다!"라는 사실에 대해.
사실 디자인은 진화하고 있으며 지금까지는 형태와 내용의 디자인이라고도 불리는 최적의 것으로 간주됩니다. 얼마 전 구글에서 개발한 것인데 많은 사람들이 받아들였습니다.
그 안에 있는 모든 것은 비례 요소와 악센트를 기반으로 하므로 숙련된 개발자의 손에서 매우 간단하고 이해하기 쉽습니다. 예를 들어, 애플리케이션에서 왼쪽으로 슬라이드되는 프로필이 있는 패널은 모두 그게 전부입니다.
10~15년 전에는 같은 전화기가 어떤 모습이었는지 기억해 봅시다. 각 Nokia 모델은 완전히 새로운 것이었습니다. 이 모든 슬라이딩 패널, 모든 방향의 접이식 화면, 가장 미친 키보드 레이아웃 등 모두 매우 멋졌습니다. 동시에 신제품에 대한 이해 부족에 대한 불만은 기억 나지 않으며 모든 것이 너무 새롭고 흥미롭고 멋졌습니다!
하지만 발전하면서 모든 것이 상단에 버튼이 있고 측면에 2개(또는 LGE처럼 후면에 3개)의 버튼이 있는 간단한 플레이트로 축소되었습니다. 이제 제품은 다른 사람의 제품과 같거나 새롭고 이해할 수 없습니다. 이제 바퀴를 재발명하는 것은 의미가 없습니다. 특히 이미 존재하는 것보다 덜 편리하다면 더욱 그렇습니다. 이제 장치 및 인터페이스 디자인, 웹 디자인이 최적에 이르렀고 더 잘하기가 점점 더 어려워지고 있습니다. 대형 제조사들은 서로 흉내낼 만큼 멍청하지 않고, 편리함을 결정하는 규칙을 받아들일 정도로 똑똑해 마침내 공통 개념에 이르렀다.
소셜미디어 디자인도 마찬가지다. 개발자가 가장 원하지 않는 것은 그들이 디자인을 훔쳤다는 말을 듣는 것입니다. 아니요. 수천 개의 다른 의자와 비슷한 의자를 만든다면 아무도 당신을 판단하지 않을 것입니다. Ikea는 바로 그런 일을 합니다. 그들은 고통스러울 정도로 진부하지만 단순하고 좋은 것들을 만듭니다. 그렇다면 웹디자인의 문제점은 무엇인가?
이제 최신 VK에 대한 주관적인 "생각"은 다음과 같습니다.
나아지 다. 그게 진실이야. 이전 버전은 거의 변경되지 않아 현대 소셜 네트워크라기보다는 2000년대의 오래된 주제별 포럼처럼 보입니다. 이제 모바일 버전과 애플리케이션은 사이트와 공통점이 많습니다. 이것은 훌륭합니다. 그들 사이에는 논리적 연결이 나타났습니다. '구독' 등이 포함된 그 추악한 다층 반 페이지 아바타가 커뮤니티에서 사라졌습니다. 이제 페이지를 떠나지 않고도 알림을 클릭하면 확인할 수 있습니다. 이는 좋아요와 답글일 뿐, 별도의 고민을 위한 칸이 아닙니다. 답변이 포함된 사진은 이제 끝없이 내려가는 대신 열릴 때 서로 보완됩니다.
메시지 정보:저는 VK를 통해 하루에 5~20개의 대화를 많이 나누는데 이 새로운 형식은 저를 매우 기쁘게 합니다. 만족스럽지 못한 분들은 화면 하단의 톱니바퀴를 클릭하고 설정을 변경하시면 쉽게 이전 형식으로 전환하실 수 있습니다. 모두가 행복해야겠죠?
동시에 나는 동의한다.
모바일 애플리케이션과 iOS를 즉시 재설계합니다. 외관 업데이트에 대한 첫 번째 개념은 공식 VKontakte 블로그에 게시되었으며, 특히 Knyazev는 회사의 디자이너 작업에 대해서도 이야기했습니다.
탭바는 클라이언트와 iOS에 다시 나타납니다. 화면 하단에 주요 기능을 다루는 탭이 있는 단일 탐색 모음입니다. 그건 그렇고, 소셜 네트워크 설계자들은 2012년에 그것을 포기했습니다. 새로운 디자인 비전에서 탭바에는 VKontakte의 주요 섹션인 "뉴스", "검색 및 권장 사항", "메시지", "알림" 및 사용자 메뉴가 포함됩니다. 공개된 스크린샷으로 판단하면 사이드 메뉴는 애플리케이션 재설계에서 완전히 제거될 예정입니다.
근본적으로 새로운 사용자 인터페이스 외에도 VKontakte 디자이너는 다가오는 외관 업데이트를 통해 몇 가지 기능적 혁신을 추가할 예정입니다. "검색 및 추천" 섹션에는 주변 사용자의 직사각형 스토리와 새로운 작성자의 잠재적으로 흥미로운 게시물 피드가 표시됩니다. VKontakte의 수석 디자이너는 새로운 섹션을 "개인 취향을 고려하여 고품질의 익숙하지 않은 것을 찾을 수 있는 끈적한 것"이라고 설명합니다. 뉴스피드에 조회수 카운터가 추가되고(현재는 게시물을 열 때만 표시됨) 좋아요가 빨간색으로 변합니다.
업데이트된 내용은 언제 나오나요?
Runet은 잘 알려진 사이트와 서비스의 재설계에 대한 리뷰가 좋지 않습니다. 이 글은 그것을 고치는 것에 관한 것이 아닙니다. 내 목표는 VKontakte 웹 버전의 문제 중 하나에 대한 해결책을 커뮤니티와 논의하는 것입니다.
작년 VK 재설계 공모전에서 공모전 작성자는 웹 버전의 문제점을 언급했습니다. 그들은 좁은 폭의 부지를 가장 큰 문제점으로 꼽았습니다. 저는 VKontakte 팀의 의견에 동의하며 이 문제를 해결하기 위한 자체 솔루션을 구축하기로 결정했습니다.
통증
문제 #1 - 좁은 화면
화면 너비 외에도 2가지 문제를 더 확인했습니다.
문제 #2 - 웹 버전과 애플리케이션의 스타일이 다름
문제 #3 - 메신저
메신저는 비교적 최근에 VK에 등장했습니다. 첫 번째 버전은 눈에 띄게 스타일이 뒤떨어졌으나 시간이 지나면서 이 문제가 해결되었습니다. 제 생각에는 메신저의 주요 문제는 그것이 사이트와 병행하여 존재한다는 것입니다. 대응창구가 작습니다. 그리고 확장 가능하지만 절대 좌표에 묶여 있어 서비스 이용이 불편합니다. 페이스북에서도 메신저는 사이트와 별도로 존재하며 작은 서신창을 많이 만든다.
이론 - 더 넓어지는 방법
먼저 좁은 화면이 무엇인지 결정해 봅시다. 현재 VC의 폭은 791pcs입니다. 경쟁 작업에서는 사이트를 1024pk의 해상도로 조정한다고 말했습니다. 제가 보기에 좁은 화면 문제의 해결책은 1024~1600pcs의 해상도에서 작동하는 인터페이스가 될 것입니다. 즉, 인터페이스는 좁은 해상도(1024pk)와 넓은 해상도(1440+pk) 모두에서 작동할 수 있습니다.1. 물리적 스트레칭
해결책은 간단합니다. 우리는 사이트를 고무로 만듭니다.
장점:
+ 구현이 용이함
단점:
− 콘텐츠를 읽을 수 없게 됩니다.
− 사이트의 일부 섹션(예: 친구)을 완전히 수정해야 하는 경우
2. 병렬 프레젠테이션
이 기술은 iA의 2006년 Facebook 재설계 개념에서 볼 수 있습니다. 댓글은 게시물 오른쪽에 있습니다. 5년 전 나는 내 프로젝트 중 하나에서 이 방법을 사용해 보았습니다.
장점:
+ 게시물은 댓글로 인해 중단되지 않고 선형으로 정렬됩니다.
+ 게시물의 댓글은 추가 전환 없이 즉시 표시됩니다.
단점:
− 화면의 정보 밀도가 고르지 않음
− 1024개 버전은 매우 어렵게 생성될 수 있거나 와이드 버전과 강제로 다를 수 있습니다.
– 사이트의 일부 섹션을 전면적으로 수정해야 하는 경우
3. 슬라이딩 패널
웹 서비스에서 인기를 얻은 접근 방식: SRM 시스템, 작업 관리자. 화면은 종속 패널로 구성됩니다. 패널은 서로의 오른쪽에 나타납니다. 화면에 모든 내용이 포함되어 있지 않으면 오른쪽 패널이 나타날 때 왼쪽 패널이 숨겨집니다.
장점:
+ 작은 해상도에서는 패널을 전환할 수 있고, 큰 해상도에서는 모든 것을 한 번에 표시할 수 있습니다
+ 태블릿 버전과 인터페이스의 유사성
단점:
− 웹 사용자에게는 익숙하지 않은 옵션
– 사이트는 화면 중앙이 아닌 왼쪽에 위치해 있습니다.
− 대규모 건축 작업
− 선형 보기가 없으며 댓글을 읽으려면 뉴스를 클릭해야 합니다.
4. 창문 2개
화면에 두 개의 활성 작업 섹션이 있는 인터페이스입니다.
장점:
+ 현재 인터페이스를 거의 변경하지 않아도 됨
단점:
− 두 가지 모드를 동시에 사용하는 방법과 그 이유가 명확하지 않습니다.
5. 두 개의 열
정보 표시 모드는 Facebook의 타임라인과 유사합니다. 이 옵션을 기반으로 한 개념은 다음과 같습니다. 이겼다 VK 재설계 대회에서.
장점:
+ 정보 정리가 용이함
+ 화면의 균일한 데이터 밀도
단점:
− 뉴스를 읽을 때 집중 집중
− 페이스북
6. 카드
세로형 스토리텔링에서 그리드형 스토리텔링으로 전환 중입니다. 예 - 핀터레스트.
장점:
+ 모든 해상도로 쉽게 확장 가능
단점:
− 내용을 인식하기 어려움(다시 학습하기 어려움)
− 사이트의 모든 섹션을 완전히 수정해야 합니다.
실천이 나의 해결책이다
나는 네 번째 접근 방식인 두 개의 활성 창이 있는 화면을 기반으로 솔루션을 구축했습니다. 두 번째 창은 메신저입니다. 이를 통해 뉴스를 읽으면서 채팅을 할 수 있습니다. 2개의 브라우저 탭을 사용하지 않고.
작은 (<1440пк) экранах окно чата сворачивается.
원하는 경우 기본 콘텐츠 위에 열립니다. 뉴스를 읽으면서 채팅하는 시나리오도 같은 방식으로 작동합니다.
최신 서신이 포함된 사용자 패널 자체는 사이트의 모든 섹션에 있는 화면에 남아 있습니다.
비하인드 스토리 세부정보
스크린샷을 자세히 살펴보면 인터페이스의 다른 변경 사항을 확인할 수 있습니다.
1. 배경.블록의 대비를 높이기 위해 배경이 추가되었습니다.
2. 블록으로 나누기.포스트는 독립적인 블록으로 분리되었습니다.
3. 좋아요가 올라갔습니다.아마도 가장 논란이 많은 변화일 것이며 아마도 별도의 논의가 필요할 것입니다.
4. 기존 상단 메뉴가 사라졌습니다.모든 기능은 이미 사이트 섹션에 복제되어 있습니다. 그 자리에는 탭 레벨이 있었습니다. 이로써 내비게이션 층을 하나 줄일 수 있게 됐다. 필터(거의 사용되지 않는 항목)가 드롭다운 목록으로 이동되었습니다. 또 다른 내비게이션 층이 없습니다.
5. 친구 보기를 위한 두 가지 모드.하나는 웹 버전에서 빌린 것이고, 다른 하나는 태블릿에서 빌린 것입니다. 어느 것이 더 대중적이고 더 편리한지 평가하기는 어렵습니다.
6. 개인 메모.각 친구에 대한 개인 메모 블록이 나타났습니다. 마음에 드신다면 여기에서 받으세요 - VK 메모.
7. 웹 통화.이전에는 이미 VK에 있었지만 별도의 작동 모드로 만들어졌습니다. 이제는 기본적인 서핑과 커뮤니케이션을 방해하지 않는 눈에 보이지 않는 기능입니다.
포스트스크립트 대신
사용자 페이지의 프로토타입 없이 소셜 네트워크를 재설계하는 것이 가능합니까?현재 버전에는 음악, 비디오, 그룹, 공개 페이지, 사진, 지도에 있는 사진, 사진 앨범, 친구, 함께 아는 친구, 온라인 친구, 구독자 등의 정보가 너무 많습니다. 저는 불필요한 것들을 모두 잘라내기로 결정했습니다.
그게 다입니다. 관심을 가져주셔서 감사합니다.
모든 것이 나쁘다
저는 이번 재설계가 전문가 수준에 미치지 못했다고 평가합니다. 사이트의 너무 많은 중요한 기능이 이전보다 악화되었으며, 사이트를 보완하고 다르게 만드는 작은 것들이 제거되거나 쓰레기로 변했습니다.
점진적으로 재설계를 도입할 가치가 있었습니다.
많은 작업이 수행되었으며 이는 이해할 수 있습니다. 모든 것을 한 번에 다시 시작했는데 이는 근본적으로 잘못된 것입니다. 페이스북처럼 사이트를 부분적으로 업데이트하는 것이 더 좋을 것 같습니다. 결국 사용자는 새로운 것에 대비해야 하고, 새로운 것은 부분적으로 테스트한 다음 피드백을 바탕으로 점진적으로 출시해야 합니다.
상단에 못 박힌 파란색 관
중요한 내용이 포함된 경우 고정 헤더를 이렇게 만들 수 있습니다. 이제 검색 및 오디오 녹음 아이콘을 제외하고는 산만하고 견고한 고정 관인 것 외에는 아무것도 없습니다.
뉴스 페이지가 더 좁아지고 복잡해졌습니다.
사진이 페이스북처럼 열리기 시작했어요
눈에 덜 띄는 결함 상위 5개
눈에는 암시적이지만 뇌에는 분명합니다. 주요 내용은 다음과 같습니다.
- 메뉴의 픽토그램 아이콘
- 기존 버전의 순수성을 앗아간 옅은 회색 배경
- 프로필의 왼쪽 열은 스크롤 시 고정되어 뉴스가 허용된 콘텐츠의 전체 너비로 확장되는 것을 허용하지 않습니다(이전 버전과 동일).
- 새 로고는 헤더에 맞지 않고 빈 공간이 더 많이 생깁니다.
- 내 프로필에 내 활동 표시(온라인)가 표시됩니다! 이것이 논리의 끝이다! 내 프로필 이름 옆에 텍스트 표시가 있을 뿐만 아니라 이제 녹색 원도 표시됩니다.
사용자가 가장 짜증나는 것은
정말 그렇게 나쁜가요? 대체 전문가 의견
빅터 코지레프
Frog Design, Badoo 및 Cogniance의 UX 디자이너; 스펜더(Spender) 앱 제작자
“아마도 많은 사람들이 대기업의 디자인에서 더 급진적이고 공격적인 조치를 기대하지만 제 생각에는 VKontakte는 실용적인 길을 택하고 특정 문제를 해결했습니다. 새로운 시각적 스타일이 눈에 띄고, 확실히 더욱 현대적이고 유쾌해졌습니다. 내비게이션도 재설계되고 단순화되었습니다. 이제 모든 것이 더 간결해 보이고 인식하기가 더 쉬워졌습니다. 타이포그래피는 깔끔하고 깨끗하며 대비가 뛰어나 대부분의 사용자에게 편안한 경험을 보장합니다.
사용자에게 표시되는 VKontakte 글꼴은 운영 체제 및 브라우저 버전에 따라 다릅니다(iOS 사용자에게는 San Francisco 글꼴이 표시되고 Android 사용자에게는 Roboto가 표시됩니다). 시스템 글꼴 사용으로 인해 사용자는 거의 친숙하고 눈에 거슬리지 않으며 편안한 모양과 느낌의 제품을 받게 됩니다.
변화의 성격에 관계없이 어떤 경우에도 대다수의 청중이 분개할 것이라는 사실에 대비해야 합니다. 이는 이해할 수 있습니다. 일반 사용자가 항상 변경의 잠재적 이점을 즉시 평가할 수는 없습니다. 하지만 익숙한 편의시설의 상실로 인한 불편함은 즉각적으로 느껴진다. 기존 솔루션이 너무 좋아서가 아니라 사람들이 이에 익숙해졌기 때문입니다. 이것은 심리학으로 설명됩니다. 대부분의 청중은 원칙적으로 재 설계 사실에 짜증을 낼 것입니다. 그리고 그 이유는 가장 눈에 띄는 세부 사항일 수 있습니다. 누군가는 글꼴이나 아이콘의 차이를 알아차릴 것이고 누군가는 새로운 탐색에서 결함을 발견할 것입니다.
나는 개인적으로 3열 레이아웃을 좋아하지 않으며 페이지를 더 쉽게 읽을 수 있도록 단순화하려고 노력합니다. 특히 이는 사용자 프로필에 적용됩니다. 페이지가 과부하된 것처럼 보이고 시각적으로 동질적이며 올바르게 배치된 시각적 강조가 부족한 것 같습니다. 유사한 솔루션이 많이 있음에도 불구하고 VKontakte는 여전히 더 깔끔하고 현대적으로 보이며 인터페이스도 더 쉽게 인식할 수 있습니다."
여전히 이전 VKontakte 디자인을 반환하려면 Stylish 브라우저 확장 프로그램을 다운로드하세요. 설치한 후 기존 소셜 네트워크 디자인의 스타일 페이지를 열고 "스타일리쉬로 설치" 버튼을 클릭한 후 새 스타일 선택을 확인하고 브라우저를 다시 시작해야 합니다.
