달력

11

« 2019/11 »

  •  
  •  
  •  
  •  
  •  
  • 1
  • 2
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30


 

 

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

 

구분

설명

최소한의 변수로 테스트

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

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

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

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

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

테스트 부분만 동작

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

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

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

 

 


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

댓글을 달아 주세요



 

UI 시나리오 작성시 고려 사항

고려사항

설명

완전성

(Complete)

누락되는 것이 없도록 최대한 상세하게 기술해야 하며 해당 시스템보다는 사용자의 사용 방법에 기초하여 작성해야 한다.

일관성

(Consistent)

전체 화면과 UI 요소들은 일관성을 갖고 있어야 한다.

가독성

(Readable)

표준화된 템플릿 등을 활용하여 작업자 간에 문서 통한 소통이 원활하여야 하며 문서를 쉽게 읽을 있어야 한다.

이해성(Understandable)

추상적이거나 보편적으로 사용하지 않고 이해하기 어려운 용어의 사용은 피한다.

수정 용이성

(Modifiable)

수정이나 개선 사항에 대해서 시나리오에 반영하는 것이 쉬워야 한다.

추적 용이성

(Traceable)

변경 사항에 대해서 언제, 어떤 부분이 어떤 이유로 변경 되었는지에 대해 쉽게 추적할 있어야 한다.

https://codedragon.tistory.com/5374

 

 

 

 

 

좋은 UI 특징 원칙 (감성과 인지적 품질)

구분

특징 원칙

가독성 & 시인성

·         너무 많은 버튼이 디스플레이 되거나 너무 복잡한 아이콘은 사용자에게 부담

·         UI 보고 의미를 혼동 없이 쉽게 읽고 정확하게 이해할 있게 설계

접근성 & 관용성

·         불특정 다수의 사용자도 시스템 UI 접근할 있도록 하고 동시에 다양한 사용자의 문화적/언어적 차별이 없이 사용자 요구를 반영

메타포(Metaphor, 은유)

·         현실세계의 대상물을 메타포로서 인터페이스에 옮겨 놓은 아이콘들은 직관적 사용성에 효과적

·         메타포의 활용은 문화적, 언어적 장벽들을 자연스럽게 극복

피드백

·         작업을 수행 피드백은 가능한 즉각적으로 제공

https://codedragon.tistory.com/5374

 

Posted by codedragon codedragon

댓글을 달아 주세요



 

 

uimovement (UI무브먼트)

유저 인터페이스 디자인을 중심적으로 다루는 사이트입니다.

 

 

https://uimovement.com/


 


Posted by codedragon codedragon

댓글을 달아 주세요



 

Naver logo image

 

naver image

http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif

 

 

 

블로그에 올린 iamge

https://t1.daumcdn.net/cfile/tistory/992E25445A4C887B1A

 





블로그에 올린 iamge

https://t1.daumcdn.net/cfile/tistory/9968EA365D9E00F81D




Posted by codedragon codedragon

댓글을 달아 주세요


 

 

인터페이스 현황

단위 업무 시스템이 다른 단위 업무 시스템과 주고받는 데이터의 종류와 데이터 형식프로토콜연계유형, 주기 등을 명시하는 것입니다.

 

 

 

 

 

인터페이스 현황 작성 고려 사항

·         어떤 형식(format)으로 데이터를 주고받는지 고려 (XML, 고정 포맷, 가변 포맷 )

·         어떤 통신규약 사용하고 있는지 고려 (TCP/IP, X.25 )

·         연계유형 무엇인지 고려 (EAI, FEP)

·        

 

 

 

기업 응용 프로그램 통합(Enterprise Application Integration; EAI)

http://bit.ly/2KJ8bRN

http://www.terms.co.kr/EAI.htm

https://en.wikipedia.org/wiki/Enterprise_application_integration

 

 

 

FEP (Front End Processor)

메인프레임의 통신제어를 위해 설계된 전용 컴퓨터

http://www.terms.co.kr/FEP.htm

https://en.wikipedia.org/wiki/Front-end_processor

 

 

 

 


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

uimovement (UI무브먼트)  (0) 2019.10.15
Naver logo image  (0) 2019.10.10
인터페이스 현황, 인터페이스 현황 작성 시 고려 사항  (0) 2019.09.27
프로토타입(Prototype) 유사 용어  (0) 2019.09.08
Designing Web Navigation  (0) 2019.08.26
사용성(Usability)  (0) 2019.08.15
Posted by codedragon codedragon

댓글을 달아 주세요