Web Apps에서 적절한 UI/인터랙션/기능 디자인을 위해서는 어떤 기술이 필요합니까?

https://stackoverflow.com/questions/21869

09-06-2019
|

문제

처음부터 웹 애플리케이션을 개발할 때 사용 가능하고 상호 작용이 풍부한 제품을 생산하는 데 필요한 기술은 무엇입니까?

UI 프로토타입을 먼저 하시나요?
사용자 스토리를 사용하시나요?
추천하거나 적극적으로 옹호하고 싶은 애자일 방법론이나 모범 사례가 있나요?

간단히 말해서: 요구 사항 수집에서 AmazingWebApp™으로 넘어갈 수 있는 기술은 무엇입니까?

마지막으로:추천하고 싶은 책이 있나요?

해결책

디자인 감각이 좋습니다.프로그래머가 이해하기 어려운 부분입니다.때때로 프로그래머는 무엇이 작동하는지 잘 알고 있지만 실제로 가장 잘 작동하는 것을 만드는 방법을 알지 못할 수도 있습니다.주로 모든 것을 가져가고 무언가가 제대로 작동할 때까지 자유롭게 이동할 수 있는 능력이 필요합니다.

내가 하는 방법은 작업을 온라인이나 오프라인으로 수행하는 방법에 대한 가장 논리적이고 일반적인 아이디어가 무엇인지 파악하고 이를 복제하는 방법을 확인하는 것입니다.짧고, 간단하고, 명확하고, 접근 가능하며 논리적으로 생각하십시오.아무런 지시 없이 누군가에게 그것을 건네줄 수 있고 그들이 당신이 원하는 모든 것을 할 수 있고 더 많은 일을 할 수 있다면 그것은 효과가 있습니다.앱에서 일상적인 작업을 수행하기 위한 지침이 필요한 경우 이는 잘못된 디자인입니다.

나는 또한 당신이 깨닫지 못할 수도 있지만 어떤 이유에서든 작동하는 수준에서 당신에게 호소력을 발휘하는 다른 앱을 살펴보고 그것을 복제하려고 노력한다고 말하고 싶습니다.

다른 팁

그냥 소프트웨어를 사용해서 할 수 있는게 가장 좋은 것 같아요..

앱 작업을 할 때 주말에(때로는 더 빨리) 집에 이메일로 보내는 경향이 있습니다. "작업 모드"에서 벗어나 평소대로 설치합니다(예:IDE에서 실행하지 않음) 그런 다음 사용하십시오.

"테스트 모드"에서 벗어나 실제로 응용 프로그램을 알고 있는 것을 "잊는" 것은 어렵습니다.하지만 일단 그 스윙에 빠지면 그럴 수 있습니다. 정말 유용하고 매우 눈을 뜨게 만듭니다. (그리고 "멋진 작은 기능"이 실제로는 짜증나고 다시 구현해야 한다는 사실을 알게 되면 가슴이 아플 때도 있습니다!)

내 상사는 내가 유용성에 대해 "항문적"이라고 말합니다.나는 그것을 좋아한다 :)

내 생각에는 어떤 유형의 시각적 프로토타입 제작(HTML과 CSS를 사용하더라도)이 가장 좋다고 생각합니다.코딩을 시작하고 나중에 인터페이스에 대해 걱정하고 싶은 유혹이 있는데, 그것이 대개 (적어도 나에게는) 정말 나쁜 일로 이어집니다.나는 이것을 개발한다 ©훌륭한 기능성 결국 내 코드에 접근할 수 있는 도구를 빨리 확보할 수 있도록 인터페이스를 서두르게 됩니다.

어디서 들었는지는 기억나지 않지만, 최종 사용자에게는 인터페이스가 바로 애플리케이션입니다.사용자를 만족시키려면 인터페이스부터 시작하여 제공할 기능을 인터페이스가 지시하도록 해야 합니다.

모범 사례는 팀원의 재능에 따라 달라집니다.

첫째, 항상 사용자 스토리를 작성하고(가능하다면 팀 이벤트로 만드세요) LighthouseApp.com이나 즐겨 사용하는 티켓팅 시스템에 로드하세요. 처음 10~20개만 있으면 시작하실 수 있습니다.

UI 디자이너가 있는 경우 페이지 프로토타입이 유용할 수 있습니다.그러나 소프트웨어 개발자가 적절한 HTML/CSS 기술을 보유하고 있다면 가능한 한 빨리 깨끗한 UI/HTML/CSS를 갖춘 작업 프로토타입을 만드는 것을 선호합니다.이 출력은 HTML/CSS를 재작업/장식할 수 있는 "현대 웹 디자이너"에게 전달될 수 있습니다.디자이너는 소스 제어 시스템을 통해 개발자와 동일한 코드베이스에서 작업해야 합니다.

일부 "고학년 디자이너"는 "사이트를 장식"하라는 제안에 기분이 상하고 프로그래머에게 포토샵 파일을 건네주겠다고 고집할 것입니다.단순한 마케팅 웹사이트에는 괜찮을지 모르지만 AmazingWebApp™을 구축하는 과정은 마음에 들지 않습니다.

여기 사람들이 훌륭한 팁을 주고 있어요.

'시각적으로 예쁜' 것과 '기능적인'(또는 사용의 용이성) 사이에는 차이가 있습니다.실제로 다른 것 없이 하나만 가질 수 있습니다.이 포럼은 좋은 예입니다. 유용성이 매우 높지만 솔직히 엉망입니다. 죄송합니다. 스택, 그래도 여전히 사랑합니다 :)

현실은 당신이 필요합니다 기술 좋은 인터페이스를 만들기 위해.이것은 수년간의 연습과 함께 제공됩니다.나는 일반적으로 새로운 앱의 전체 UI를 디자인하기로 계약했습니다.이런 종류의 기술을 갖춘 프로그래머나 그래픽 디자이너를 거의 본 적이 없습니다(시장이 좁습니다).나는 대학에서 HCI, UI 디자인 및 사용성 분석에 대한 타고난 통찰력을 가지고 있다는 것을 알았습니다.나는 책을 많이 읽고 경험을 쌓으면서 이러한 기술을 더욱 발전시켰습니다. FUI 디자인을 많이 하고 있어요. 그래서 제가 말하고자 하는 것은 UI 디자인을 잘하는 것에 대해 진지하게 생각한다면 열심히 일할 준비를 하라는 것입니다.마음먹은 것은 무엇이든 할 수 있지만, UI 디자인을 공부하는 데 시간을 보낸다면 Ruby on Rails나 가장 최신 유행하는 기술을 사용하여 애자일을 배우는 데 시간을 보내지 않는다는 의미입니다.

몇 가지 일반적인 팁:

소규모 기업 웹사이트가 아닌 웹 소프트웨어 앱을 구축하는 경우 lo-fi 프로토타이핑이 탁월합니다.한 무리의 사람들을 모으고, 정육점 종이 더미와 컬러 마커를 모아두면 며칠 안에 얼마나 많은 화면을 스케치할 수 있는지 놀라게 될 것입니다.
소프트웨어는 자명해야 합니다..소프트웨어에는 사용자 설명서가 필요하지 않습니다.내가 개발한 CMS에는 사용 설명서가 없습니다. CMS를 사용하는 고객이 수십 명 있는데 그 중 누구도 나에게 설명서를 요청한 적이 없습니다.
'큰 소년들이 하는 일'을 지켜보세요.eBay에 다음과 같은 검색창이 있는 경우:'[......] (검색)' 그런 다음 당신도 그렇게 하십시오(비표준이 아니라 괜찮습니다:'찾다:[......] (가다)'.).이것은 다음과 같이 알려져 있습니다. 어포던스.당신은 다른 시스템에 대한 사람들의 친숙함을 활용하여 자신의 시스템이 어떻게 작동하는지에 대한 시작을 제공합니다.

나는 이 책을 추천하고 싶습니다:

내가 유용성을 생각하게 만들지 마세요

또한 도움이 될 만한 몇 가지 블로그 기사도 있습니다.

우리가 하는 일들:

종이, 포토샵, 때로는 실제 구현 모두에서 다양한 개념을 탐구하는 수많은 프로토타입
다시 정리하고 반복하세요.전체 앱을 완료하고 처음부터 완벽하게 만들려고 하지 마세요(이런 일이 일어나지 않을 것이라는 것을 마음속으로 알고 있기 때문입니다).
영리함보다 명확함, 이것은 사용자 경험 작업을 할 때 제가 최근에 묻고 있는 것 중 하나입니다. 확실히 아이콘과 회전하는 것들은 멋져 보일 수 있지만 명확하고 간결합니까?
사용자 목표에 집중하세요. 개발자가 한 번에 하나의 화면, 한 번에 하나의 작업에 집중하는 것은 매우 일반적인 경향입니다.그것은 당신의 애플리케이션을 사용하는 사람이 생각하는 방식이 아니라는 것을 기억하십시오. 그들은 목표를 염두에 두고 있으므로 최대한 많은 노력을 기울여 목표에 도달하도록 노력하십시오.
당신이 만들고 있는 소프트웨어를 가능한 한 많이 사용하세요. 소프트웨어의 결점, 단점, 문제점을 직접 경험해 보는 것보다 더 좋은 방법은 없습니다.

@Brian Warshaw - 제 생각엔 aza raskin이 한 강연에서 나온 것 같아요. 내 생각엔 이 영상

완전히 혁신적인 UI를 디자인하는 것은 대부분의 프로그래머에게 매우 어렵습니다(저만 그런가요?).웹 앱용 UI를 구축/디자인하는 데 유용하다고 생각하는 것은 항상 인터넷을 탐색하거나 다른 데스크톱 앱을 사용하는 동안 찾을 수 있는 멋지고 사용하기 쉽고 우아한 사용자 인터페이스를 찾는 것입니다.당면한 작업에 가장 효율적인 UI(다른 사람이, 다른 장소에서 디자인)를 찾으면 앱에 대한 더 나은 사용자 경험을 구현하고 생성하는 작업을 훌륭하게 수행할 수 있습니다.예를 들어, 이 답변을 입력할 때 '미리보기 숨기기' 옵션과 함께 답변의 실시간 미리보기를 표시하는 방식이 마음에 듭니다. 사용자 포럼 인터페이스를 구축하는 동안 확실히 비슷한 유형의 상호작용을 사용하고 싶습니다. .

당신이 구축하고 있는 것과 제품이 무엇을 나타내는지 파악하는 것은 성공적인 애플리케이션을 구축하는 데 큰 열쇠입니다.나는 최근 요구 사항 수집에 관한 블로그 항목을 작성하여 이에 대해 조금 설명했습니다.여기서 읽을 수 있습니다:요구 사항 수집 기술을 향상시키는 방법.

또한 즐거운 경험을 제공하는 올바른 제품을 만들기 위해 제가 따르는 몇 가지 높은 수준의 원칙은 다음과 같습니다.

사용자와 고객의 차이점을 알아보세요.반짝이는 프로젝트를 승인하는 사업주는 대개 고객입니다.그러나 치명적인 실수는 그들을 사용자로 혼동하는 경향이 있다는 것입니다.고객은 일반적으로 제품의 필요성을 인식하는 사람이지만 사용자는 실제로 솔루션을 사용할 사람입니다(그리고 나중에 제품이 충족하지 못한 요구 사항에 대해 불평할 가능성이 높습니다).여러 사람에게로 이동

우리는 모두 인간이기 때문에 모든 극심한 세부 사항을 기억하지 못하는 경향이 있습니다.더 많은 사람과 대화하고 대조해 보면 누락된 요구 사항을 찾을 가능성이 높아집니다.

스페셜을 피하세요사용자가 매우 구체적인 것을 요구하는 경우 주의하세요.항상 편견에 의문을 제기하고 이것이 실제로 제품을 더 좋게 만들 수 있는지 확인하십시오.

원기사용자에게 당신이 가지고 있는 것을 보여줄 때까지 기다리지 마십시오.프로토타입을 자주 만들고(베타 버전이라고도 함) 개발 프로세스 전반에 걸쳐 지속적인 피드백을 받으세요.이렇게 하면 아마도 더 많은 요구 사항을 찾을 수 있을 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow