Freecodecamp: 사용자 계정/사용자 정보 페이지 개선

2번과 3번 둘 다 파는데.. 제일 오랫동안 밑에 옵션이 있는줄도 몰랐는데 이게 엄청난 개선이 될 것 같아요!

@ltegman 내 요점을 증명합니다. 여기까지 스크롤할 생각조차 하지 않는 사람이 거의 없기 때문에 많은 사람들이 그 존재를 알고 있는지 의심스럽습니다.

사려 깊은 피드백에 감사드립니다, @pmbenjamin. 내 생각은 다음과 같습니다.

• 우리는 드롭다운 메뉴를 사용하지 않으므로 #1이 없습니다.
• 몇 달 전에 의도적으로 이전 계정 관리 페이지와 코드 포트폴리오 페이지를 병합하고 프로필 이미지와 브라우니 포인트 점수를 동일한 코드 포트폴리오 페이지로 지정했습니다. 나는 페이지를 단순화하고 혼란을 줄이기 위한 공동 노력의 일환으로 이 작업을 수행했습니다(브라우니 포인트 점수도 프로필 이미지도 귀하를 어디로 데려갈지 명시적으로 알려주지 않기 때문입니다).
• 이제 모든 것을 "도전"과 "프로젝트 도전"으로 병합했으므로 두 개의 테이블만 있을 것입니다. 우리는 그것들이 차지하는 수직 부동산을 줄이기 위해 접힌 아코디언으로 구조화할 수 있습니다.

@QuincyLarson 나는 당신의 생각에 완전히 동의합니다.
이러한 유형의 변경(예: UI/UX)은 핵심 팀 구성원(예: Berkeley)이 수행해야 합니까?
아니면 찔러봐도 될까요?

@QuincyLarson 접을 수있는 테이블은 나에게 좋은 생각처럼 들립니다. 너무 많이 스크롤하지 않고도 계정 설정으로 빠르게 이동할 수 있도록 기본적으로 자체 페이지에서 축소되어야 한다고 생각합니다.

또한 코드 포트폴리오에서 비코드 문제를 제거하는 것이 좋습니다. 여기에는 다음이 포함됩니다.

• 무료 코드 캠프 커뮤니티 가입의 모든 것(5개 항목)
• 성공을 위한 준비의 모든 것(4개 항목)
• "Get Set"으로 시작하는 모든 것(3개 항목)

@pmbenjamin 아니요, 손에 넣을 수 있습니다.

가능한 하위 문제 참조: #6452

생각 해보니 포트폴리오에서 해당 요소를 제거한 했습니다 .

이것과 모든 포트폴리오 스레드를 따라 더 나은 버전을 함께 생각해 낼 수 있는지 확인하십시오.

예, #6452를 참조하십시오! Map을 활용하면 딱일 것 같아요. 화면 측면에 있는 새로운 지도가 마음에 듭니다. FCC의 소스 코드에 익숙하지 않아서 지도를 다시 사용하는 것이 얼마나 쉬운지 모릅니다. 일부 코드를 건조시킬 것이라고 상상할 것입니다.

그런 접근 방식이 UX의 직관적인 기능이 될 것이라고 생각합니다. 다른 캠퍼의 페이지를 처음 방문했을 때 지도에 내 것이 아니라 해당 캠퍼의 진행 상황이 반영될 것이라고 생각했습니다.

안녕하세요, 저는 @hallaathrad 와 이야기를
그래서 나는 앉아서 목업을 했다.

왼쪽( 사이드바 )과 FCC 활동 게시판은 고정되며, 그 중 챌린지 부분만 스크롤됩니다. @QuincyLarson이 말했듯이 더 나은 UX를 위해 접힌 아코디언으로 바꿀 수도 있습니다. 또한 각 버튼에는 전체 색상으로 만드는 호버 효과가 있습니다.
개선 방법에 대한 모든 피드백을 환영합니다.

:+1:

@nightwalkerkg 그 사이드바가 정말 마음에 @hallaathrad가 이미

글쎄, 모바일은 내가 디자인을 코딩하는 사람이 될 것이기 때문에 문제가 되지 않는다. 시각적 및 기능적 개선을 제외하고는 지금과 거의 비슷하다.

프로필을 사이드바로 사용하고 싶은 마음이 실제로 있긴 하지만.
ㅋㅋㅋㅋ 사이드바 과부하. 우리는 천천히 FCC 모바일 앱의 토대를 마련하고 있습니다.

@SaintPeter 사이드바를 탐색 창으로 바꿀 수 있습니다.
http://www.roblukedesign.com/trunk/trunk.html

흠, 나는 그 아이디어를 아주 좋아하지만, 이미 지도와 채팅을 위한 기능이 있을 때 그 기능을 추가하는 것이 혼란스럽고 일관성이 없을까봐 두렵습니다.

그러나 이 두 가지를 이와 유사한 것으로 마이그레이션하는 것이 좋을 것입니다. 비록 프로젝트의 현 시점에서 실행 불가능하긴 하지만요. 아마도 중장기적으로.

@hallaathrad 모바일 보기용입니다. 일반적으로 아닙니다.

흠 듣고 있어요. 이것은 분명히 할 수 있는 일입니다. 반드시 다른 모듈을 추가하는 것이 아니라 직접 코딩해야 합니다.

네, 개선 사항으로 논의하겠습니다. 당분간은 반응형 일반 디자인에 집중하자

FCC에는 현재 너무 많은 도전 과제가 있으며 수백 가지를 완료한 사람들은 프로필 페이지가 정말 깁니다.
우리는 프로필 페이지의 지도와 같은 퍼지 검색을 구현하여 더 빨리 재방문하고 싶은 챌린지에 도달해야 합니다.

시도해 보고 접근 방식을 제출하시겠습니까? @xRahul

@hallaathrad 물론입니다! 내가 생각해 낼 수 있는 것을 보자..

@xRahul , 이것으로 아무데나

@atjonathan 아직 아닙니다. 사이트의 UI를 수정하기 전에 먼저 프론트엔드를 배웠습니다. 그래도 곧 시작합니다!

나는 우리가 단일 열 레이아웃을 고수해야 한다고 생각합니다. 사이드바를 추가하는 대신 포트폴리오 상단의 공간을 보다 효과적으로 활용하는 데 집중해야 합니다. 저는 우리의 온보딩 및 계정 구성 목표가 가장 눈에 띄어야 한다고 생각합니다.

코드 포트폴리오 페이지에서 검색하는 것도 불필요하다고 생각합니다. 사람들은 스크롤하거나 control+f를 사용할 수 있습니다. 우리가 명확한 계층 구조를 갖고 있고 가장 중요한 것이 현재 상위에 있는 한 정말 긴 코드 포트폴리오를 갖는 것은 괜찮습니다.

@QuincyLarson , github에서 바이오스를 추가하는 것과 함께 이것을

@QuincyLarson 내 제안된 재설계:

_ 글꼴 문제는 버리세요: 나는 그것들을 일치시키거나 올바른 것을 사용하는 것을 귀찮게 하지 않았습니다 :stuck_out_tongue_closed_eyes: _

@atjonathan 이것은

https://www.freecodecamp.com/challenges/configure-your-code-portfolio
https://www.freecodecamp.com/challenges/join-a-campsite-in-your-city
https://www.freecodecamp.com/challenges/learn-what-to-do-if-you-get-stuck
https://www.freecodecamp.com/challenges/read-coding-news-on-our-medium-publication
https://www.freecodecamp.com/challenges/join-our-forum
https://www.freecodecamp.com/challenges/watch-coding-videos-on-our-youtube-channel
https://www.freecodecamp.com/challenges/join-our-linkedin-alumni-network
https://www.freecodecamp.com/challenges/commit-to-a-goal-and-a-nonprofit

그런 다음 처음 두 가지 시작하기 챌린지를 병합할 수 있습니다(https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works 및 https://www.freecodecamp.com/challenges/create-a -github-account-and-join-our-chat-rooms)를 /welcome에 넣을 수 있는 하나의 도전 과제로 만들었습니다.

이렇게 하면 "시작하기" 및 "성공을 위한 준비" 섹션을 완전히 제거할 수 있습니다.

코드 포트폴리오에서 이러한 요소를 가장 잘 시각화할 수 있는 방법은 무엇이라고 생각하십니까? 모의 또는 기능적 프로토타입을 만들 수 있습니까?

@QuincyLarson이 멋지게 들리네요. Photoshop에서 시도해 보겠습니다...

@QuincyLarson , 다음과 같이 상상합니다.

@atjonathan 이것은

어떤 사람들은 이름이 매우 길 수 있으며 사용자 이름은 최대 15자까지 가능하다는 점을 염두에 두십시오.

얘들아, 나는 당신이 기능에 너무 많이 집중하고 미학과 사용자 경험에 훨씬 덜 초점을 맞추고 있다고 생각합니다.

쉽게 탐색할 수 있도록 요소를 카드로 구분했습니다. 지금은 빈 페이지를 가져 와서 요소를 던진 것 같습니다.

프로필 업데이트 진행 상황에 대해 진행률 표시줄을 사용하고 사용자에게 무엇을 해야 하는지에 대한 팁을 제공했습니다. LinkedIn에서 사용하는 목록을 사용하여 포트폴리오를 개선할 수 있는 방법에 대한 팁을 제공할 수도 있습니다. 단지 그들에게 선택권을 주는 것이 아닙니다.

(왼쪽에 아이콘이 있고 오른쪽에 사용자가 누락된 텍스트가 있는 목록을 만들 수도 있습니다.)

프로필 카드 아래에 버튼을 배치하고 공간 낭비를 피하기 위해 한 줄로 배치했습니다.

@stefanicic , 나는 이것을 파헤친다: gem:. @QuincyLarson 당신의 두뇌는 어떻게 생각하시나요?

아무도 나에게 묻지 않지만 @stefanivic에 동의합니다. UX는 이 제품과 모든 제품의 의사 결정 과정에서 최우선 순위가 되어야 합니다. 아마도 그는 이 댓글 라운드에 다시 참여하고 싶어할까요?

(이 문제가 다시 비활성화되지 않기를 바랍니다.)

@hallaathrad , @QuincyLarson 이 만족하면 #8943과 함께 즉시 구현을 시작할 수 있습니다.

: +1: @스테파니비치

@atjonathan 확실히 진행하고 구현을 시작할 수 있습니다. #8943 - 여기에서 논의하는 것은 페이지의 요소 구성일 뿐입니다.

@stefanicic 당신의 모의는 멋지게 보입니다. 몇 가지 참고 사항:

• GitHub의 바이오스는 최대 161자까지만 가능합니다.
• 위치 필드를 생략했습니다.
• LinkedIn 카드를 보여주셔서 감사합니다.

@stefanivic 부트스트랩과 Jade를 사용하여 이 보기를 직접 구현할 수 있습니까? 이렇게 하면 다양한 뷰포트 크기에서 비전이 어떻게 보일지 알 수 있습니다.

@QuincyLarson 네, 저는 둘 다 항상 사용합니다. 바로 넘어가겠습니다. 유일한 문제는 지금 시험이 있어서 2, 3일이 걸릴 수 있다는 것입니다. :NS

@stefanicic OK - 훌륭합니다! 시험에 행운을 빕니다. 가능한 한 빨리 작동하는 반응형 보기를 제공해주셔서 감사합니다.

여러분, 기다리게 해서 죄송합니다. FCC를 설정하고 실제에서 수행할 시간이 많지 않았기 때문에 CodePen에서 수행하여 반응형 보기를 처리하는 방법을 볼 수 있도록 했습니다.
http://codepen.io/nightwalkerkg/full/XKjVXz/

@QuincyLarson 이에 대한 업데이트가 있습니까?

@QuincyLarson 이에 대해 어떻게 생각하십니까?

@stefanicic , 이에 대한 pull 요청을 할 수 있습니다 :smiley:
당신은 그것을 만들고 싶어?

이곳은 잠시 동안 조용했습니다! 방금 라이브 버전을 확인했습니다. 버튼이 상단으로 이동되었습니다. 그래도 @stefanicic 의 버전에는 여전히 큰 차이가 있습니다. 솔직히 말해서, 나는 라이브 사이트의 모습이 상당히 마음에 듭니다. 제 유일한 단점은 공간을 많이 차지한다는 것입니다. 라이브 또는 새 버전을 계속 사용할 것입니까? 이 문제에서 제안된 다른 개선 사항을 계속 살펴봐야 합니까?

우리가 동의한다면 이 새로운 디자인을 구현하게 되어 기쁩니다. 나는 개인적으로 여전히 @stefanivic 의 제안이 현재 디자인에 대한 개선이라고 생각합니다.

나는 제안이 얼마나 더 간결한지 정말 좋아합니다. 나는 또한 현재 있는 버튼을 선호합니다. 일관성을 위해 현재 버튼 스타일을 사용하는 것이 좋습니다. 텍스트를 크게 만드는 것이 가독성에 정말 도움이 될 수 있다고 생각합니다. 여기의 텍스트는 FreeCodeCamp의 대부분의 위치보다 작습니다. Quincy는 이전 에 FCC에서 글꼴 크기를 늘리는 것에 대해 언급했습니다.

@systimotic yes - Bootstrap 4.0은 기본 글꼴 크기를 17px로 높였으며 이는 꽤 좋은 크기라고 생각합니다. 나중에 안정화되면 구현하겠습니다.