달력

1

« 2020/1 »

  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  


 

 

User Experience 기획 디자인 프로세스

 

단계

설명

비즈니스 전략

·         비즈니스 목표와 비전의 이해, 브랜드 전략, 시장·경쟁사 분석 UX 리서치

디자인 전략 수립

·         사용자분석, 요구사항 도출, 페르소나(persona), 사용자 인터뷰

UX 디자인 컨셉

·         사용자 테스트, 아이데이션, 컨셉 모델

UX 디자인 개발 수행

·         스토리보드, 와이어프레임, 키스크린, UI 개발, 사용자 테스트

 

 



Posted by codedragon codedragon

댓글을 달아 주세요


 

볼펜 뚜껑· 레고 블록에 구멍을 이유

어린아이가 그것을 삼키더라도 작은 구멍으로 공기가 통하도록 질식사를 막으려는 의도 디자인이 변경되어졌습니다.

 


 

http://bit.ly/2UULRsA

 


Posted by codedragon codedragon

댓글을 달아 주세요

2019. 12. 13. 18:33

DESIGN METHOD Development/UI&UX



 

 

DESIGN METHOD

단계별 디자인 설계 평가에 대한 방법들을 확인할 있습니다.

 

 

http://designmethod.korea.ac.kr/design-method/


 

 

 

http://designmethod.korea.ac.kr/method-map/


 

 


Posted by codedragon codedragon

댓글을 달아 주세요

2019. 12. 8. 00:30

Webflow Development/UI&UX


 

 

Webflow

·         웹디자인을 기본으로 하는 프로토타이핑 사이트입니다.

·         프로그램 설치 없이 상에서 프로토타이핑을 있습니다.

·         미리 만들어진 여러가지 템플릿(무료/유료) 활용해서 제작할 있습니다.

 

https://webflow.com/

 


 



Posted by codedragon codedragon

댓글을 달아 주세요


 

 

효율적인 프로토타입 테스트를 위한 고려 사항

 

구분

설명

최소한의 변수로 테스트

·         제어할 있을 정도의 변수를 이용하여 테스트를 진행해야 합니다.

·         많은 변수를 설정하여 테스트 경우 사용자의 혼란을 일으킬 있습니다.

현실적인 요소는 신경 쓰지 않기

·         테스트에 해당하는 변수만 신경을 씁니다.

·         프로토타입 테스트의 목적은 특정한 부분에 대한 유저의 반응 가치 인식 확인하는 것입니다.

테스트 부분만 동작

·         테스트의 핵심요소외 요소는 모두 제거합니다.

유저의 피드백과 행동 패턴도 관찰

·         테스트를 통해 사용자의 행동 패턴(화면 이동 패턴) 파악이 가능합니다.

 

 


'Development > UI&UX' 카테고리의 다른 글

DESIGN METHOD  (0) 2019.12.13
Webflow  (0) 2019.12.08
효율적인 프로토타입 테스트를 위한 고려 사항  (0) 2019.11.17
인터페이스(Interface)  (0) 2019.11.09
인터페이스(interface) vs 인터랙션(interaction)  (0) 2019.11.04
프로토타이핑 방법(종류)  (0) 2019.10.26
Posted by codedragon codedragon

댓글을 달아 주세요


 

 

인터페이스(Interface)

·         인터페이스의 사전적 의미는 접점(결합부; 경계면) 개념입니다.

·         일반적인 정보시스템은 다수의 프로세스 또는 다수의 서버시스템간의 상호 정보의 교환 입출력(I/O, Input, Output) 주고 받는 지점을 의미합니다.

·         의사소통이 가능하도록 일시적 혹은 영속적인 접근을 목적으로 만들어진 물리적, 가상적 매개체(접점) 의미한다.

 

 

http://bit.ly/2PmTFOl

http://bit.ly/2VhW5U2

 

 




Posted by codedragon codedragon

댓글을 달아 주세요




 

 

인터페이스(interface) vs 인터랙션(interaction)

인터랙션의 개념을 명확히 이해하기 위해서는 인터랙션과 인터페이스의 차이를 구분할 필요

있습니다.

 

어떤 앞에 사람이 있다고 가정할 인터페이스와 인터래션의 차이입니다.

인터페이스

(interface)

·         인간과 사물의 중개자 역할을 합니다.

·         제품의 보이지 않는 기능을 시각적으로 보여줍니다.

 

·         손잡이 인터페이스에 해당됩니다.



 

인터랙션

(interaction)

·         인터페이스와 사용자 사이에 일어나는 어떤 행위나 상호작용의 과정을 의미합니다.

 

·         사람이 문을 열고 들어가는 행위 인터랙션에 해당됩니다.


 


 

 


images.google.com

 




Posted by codedragon codedragon

댓글을 달아 주세요


 

 

프로토타이핑 방법(종류)

구분

방법

아날로그 프로토타이핑

·         화이트보드,

·         펜과 종이,

·         포스트잇등을 이용

 

https://codedragon.tistory.com/7463

디지털 프로토타이핑

·         파워포인트,

·         아크로뱃,

·         비지오,

·         옴니그래플,

·         악슈어,

·         HTML 등을 이용

 

https://codedragon.tistory.com/7418

 

 


Posted by codedragon codedragon

댓글을 달아 주세요



 

CUI vs GUI

UI 2가지방식으로 구현할 있습니다. 하나는 CUI, 또하나는 GUI입니다.

 

방식

설명

CUI

·         Character User Interface

·         커맨드라인인터페이스

·         키보드 통해 명령어 입력하면 컴퓨터가 작업을 수행하여 화면에 글자로 결과를 표시해 주는 방식입니다. 대표적으로 dir, cd, copy 등이 있습니다.

·         마우스 없이 키보드만으로 프로그램을 실행할 있는 인터페이스 입니다.

 

https://codedragon.tistory.com/8997

GUI

·         Graphic User Interface

·         그래픽유저인터페이스

·         CUI 달리 글자뿐만 아니라, 마우스 키보드를 이용하여 그래픽 이용하여 사용자에게 이해하기 쉬운 모양으로 정보를 제공하는 아이콘등을 키보드나 마우스로 클릭하여 프로그램을 실행할 있는 인터페이스 입니다.

 

https://codedragon.tistory.com/8513

 

 


Posted by codedragon codedragon

댓글을 달아 주세요


 

 

HTML DOM(Document Object Model) 구조도

https://codedragon.tistory.com/5383

 

 

 

 

 

 

사용성 테스트(Usability Test) 단계

https://codedragon.tistory.com/5378

 

 

 

 

 

 

 

HTML5 문서구조 도식도

https://codedragon.tistory.com/3344

 

 

 

 

 

 

UI구현을 위한 환경 구축의 단계

단계

설명

1

웹서버의 역할을 정확히 이해하고 웹서버의 종류를 조사하여 특징을 정리한다.

2

다양한 클라이언트의 종류와 웹브라우저의 호환성을 확인한다.

3

웹서버를 구축하는 프로그램이나 방법을 조사한다.

4

편집도구의 종류를 조사하고 작성한다.

5

작성한 HTML문서를 실행한다.

 

 

 

 

 

 

 

웹사이트에 접속하기 위한 로그인 과정의 처리 절차(Process Diagram 예시)


 

 

 

 

 

 

호환성 테스트 예시

다양한 브라우저 환경에서 호환성을 체크할 있는 테스트 케이스입니다.

구분

테스트 내용

1

최근의 브라우저와 구형 브라우저에서 작동하는가?

2

이미지를 끄거나 지원하지 않아도 내용에 접근이 가능한가?

3

텍스트 브라우저에서도 동작하는가?

4

상세한 메타데이터를 포함하고 있는가?

5

브라우저 크기의 범위 안에서 사이트가 작동하는가?

6

CSS 끄거나 지원하지 않아도 내용에 접근이 가능한가?

 

 

Posted by codedragon codedragon

댓글을 달아 주세요