[I3 d]11 designui(2)

342 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
342
On SlideShare
0
From Embeds
0
Number of Embeds
72
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

[I3 d]11 designui(2)

  1. 1. 2012 2nd semester class by jyleeInteractive | 3D Contents 20121121 Class11 Information Design interacitve3D.jylee6977.com/tc
  2. 2. 8. 주차별 강의계획Class Schedule 주 날짜 주제 내용 교재 1 09/05 Introduction Ice Braking | Orientation 2 09/12 인터랙티브 입체영상 트렌드 인터랙티브한 입체영상 시장 및 이슈 소개 Part1 Interactivity 3 09/19 다양한 사용자 인터랙션 소개 인터랙티브 홀로그램 4 09/26 상호작용성 소개 인터랙티비티에 대한 동향 및 방법 소개 5 10/11 Open Framework 전체 프레임워크 소개 및 기획 최유주 Part2 Interactive wall 6 10/18 Open Framework Open Framework을 통한 제작(1) 교수님 진행 7 10/25 Open Framework Open Framework을 통한 제작(2) 8 11/01 중간고사 - Open Framework를 통한 Contents기획 - 인터랙티브한 환경에서의 입체영상 9 11/08 인터랙티브 입체영상 기획 - 사용자와 인터랙티브 입체영상 10 11/15 인터랙티브 입체영상 디자인(1) - 전체 기획에 따른 전략 및 전술 11 11/22 인터랙티브 입체영상 디자인(2) - 인터페이스 및 인포메이션 디자인 12 11/29 인터랙티브 입체영상 디자인(3) - 인터랙션 프로그래밍 Part3 Interactive contents 13 12/7 인터랙티브 입체영상 후반작업(1) - 기기 포팅 14 12/14 인터랙티브 입체영상 후반작업(2) Refine & Presentation Skill 15 12/21 기말고사 인터랙티브 입체영상 기획 및 제작 프레젠테이션
  3. 3. INFORMATION DESIGN
  4. 4. 1.
  5. 5. Examples in US.
  6. 6. 2. IDENTIFY THE NODES OF INFORMATIONit’s good to know what you’re working with
  7. 7. NODES OF INFORMATION: ?
  8. 8. NODES OF INFORMATION:__ Image__ Title__ Length__ From__ Views
  9. 9. NODES OF INFORMATION:__ Image__ Title__ Length__ From__ Views__ Visited (or not)
  10. 10. 3.ORGANIZE TO REDUCE COMPLEXITY
  11. 11. SortLabelIntegratePrioritize
  12. 12. ANY IDEA?
  13. 13. ANY IDEA?
  14. 14. GROUP & SORT INFO:What How
  15. 15. viewZi
  16. 16. viewZi
  17. 17. 4.REMOVEUNNECESSARYINFORMATION
  18. 18. This amount fidelity isn’t needed. User iseither accepts default result set, or all results. Anything in between is noise. 66
  19. 19. Duplicate text can confuse users, especially if they miss the arrows.67
  20. 20. Duplicate text can confuse users, especially if they miss the arrows. Instead, use tabs, or offer a drop down with plain english - “Sort by lowest price”68
  21. 21. This fidelity isn’t needed. Instead, reduce the amount of options:69
  22. 22. This fidelity isn’t needed. Instead, reduce the amount of options: BACK 1 of 8 NEXT
  23. 23. “Free Shipping both ways” is mentioned 13 times 71
  24. 24. Number of products = 12 72
  25. 25. Context makes the content explicit (remove the darn labels!)
  26. 26. LOOK AT YOUR SHEETSIs there any information that can be removed?
  27. 27. 5.EMPHASIZE MOST IMPORTANT INFORMATIONAND MINIMIZE THE LESS IMPORTANT STUFF
  28. 28. “Would you like to add this to your schedule?”
  29. 29. http://www.lukew.com/resources/articles/web_forms.html
  30. 30. viewZi
  31. 31. Present Past viewZi
  32. 32. this is the top priority?
  33. 33. Is thisnecessary?
  34. 34. Yourorder Yourorder
  35. 35. PRICE?
  36. 36. Did we get your order correct?Large Stuffed Crust Pizza $8.13 with mushroomsLarge Stuffed Crust Pizza $8.13 with olives SUBTOTAL $23.12 20% off your first web order! -$3.85 Place order for $19.26 Go back and make changes to my order
  37. 37. LOOK AT YOUR SHEETSHighlight the importantstuff. Mark the stuff you might minimize.
  38. 38. 6.HIDE NON-CRITICAL INFORMATION
  39. 39. INTERFACE CHALLENGE:HOW DO WE REDUCECOMPLEXITY IN OUR APPLICATIONS?
  40. 40. CL ICK
  41. 41. CL ICK
  42. 42. http://songza.com
  43. 43. http://songza.com
  44. 44. http://songza.com
  45. 45. http://songza.com
  46. 46. http://songza.com
  47. 47. http://viddler.com
  48. 48. http://viddler.com
  49. 49. http://viddler.com
  50. 50. interfaceS...re vealing (aka. Progre ssive Disclosur e 2.0) n uctio A quick introdhttp://slideshare.net/jeremy http://flickr.com/photos/knowprose/103650244/
  51. 51. LOOK AT YOUR SHEETS Is there any informationthat could be collapsed or hidden?
  52. 52. 7.DISPLAY INFORMATION VISUALLY
  53. 53. we’ve been visualthinkers for thousands of years 103
  54. 54. http://flickr.com/photos/iirraa/167674453/
  55. 55. http://www.viewzi.com/search/mmmgood/brownies
  56. 56. replace text with visuals
  57. 57. http://worrydream.com/MagicInk/
  58. 58. reinforce text with visuals
  59. 59. http://www.livevalidation.com/ http://www.newspond.com/
  60. 60. http://tuaw.com
  61. 61. Make relationships visually explicit!
  62. 62. Prior Period Week 1 Week 2 Week 3 Week 4 Period to date Year to date $ 3,333,826 756,779 0 0 0 756,770 18,757,608&PY 108.7 108.1 0.0 0.0 0.0 108.1 107.0$PLan 3,235,893 804,559 0 0 0 804,559 18,674,197
  63. 63. Suggest contentor function with visual cues
  64. 64. http://glassdoor.com
  65. 65. http://kampyle.com http://getsatisfaction.com
  66. 66. display data visually
  67. 67. TIP:Think in 3D
  68. 68. TIP:Ask “Can a 5 year old understand this?”
  69. 69. 7.USE TASK-BASED LANGUAGE
  70. 70. “The only use of the word you in theoriginal was amount you owe...”Karen A. Schriver http://www.jsonline.com/story/index.aspx? id=222255
  71. 71. 1040 Department of the Treasury—Internal Revenue Service U.S. Individual Income Tax Return 2003 (99) IRS use only: Do not write or staple in this space. OMB No. 1545-0074 : beginning______, 2003, ending_______, 200___. For Jan. 1–Dec. 31, 2003. If for another tax year, fill in period Presidential Election CampaignAbout You Your first name and initial Last name Do you, or your spouse (if filing aPlease place IRS Last name joint return) want $3 to go to thisname and address If a joint return, spouse’s first name and initial fund? Please be aware thatlabel here. Other- 19. Apt. no. checking “Yes” will not changewise, print or type. Home address (number and street). If you have a P.O. box, see page your tax or refund.The 1040 ss, see page 19. You Yes Ë No Ë City, town or post office, state, and ZIP code. If you have a foreign addreInstructions Spouse Yes Ë No Ëprovide help for Important! LLLLeach question onthis form. You MUST enter your SSN(s) 1 Your social security number Spouse’s social security number 2 Ë Single me)Your Filing 3 Ë Married filing jointly (applies even if only one person had an inco hereStatus 4 Ë Married filing separately. Enter your spouse’s SSN above and full name adult who qualifies them under IRS rules)Please check only 5 Ë Head of household (applies to people who provide a home for a child or hereone box. See page If the person is a child but not your dependent, enter this child’s name20 for rules. 6 Ë Qualifying widow(er) with a dependent child 7a • No. of boxes checked in 7a + 7b 7a Ë Yourself If someone else can claim you as a dependent, do not check box • No. of children in 7c Your 7b Ë Spouse who lived with you • No. of children in 7c who did Exemptions 7c Dependents: Check box for each dependent who qualifies for a child tax credit . not live with you due to divorce Last name Social security number Relationship to you If you have more than First name or separation (see page 21) Ë three dependents, • No. of dependents in 7c see page 21. Ë not entered above Ë Add numbers from above for total exemptions 7d Calculate your total number of exemptions in the column to the right 8 8 Wages, salaries, tips, etc. Attach Form(s) W-2 attach if required) 9a Your 9a Taxable interest. (See page 22 for rules about when to file Schedule B; Income 9b Tax-exempt interest. Do not include this amount on line 9a 9b 10a Please staple or 10a Ordinary dividends. Attach Schedule B if required (see page 23) 10b clip Forms W-2 10b Qualified dividends (see page 23) taxes (see page 23) 11 and W-2G here. If 11 Taxable refunds, credits, or offsets of state and local income you did not get a 12 12 Alimony received W-2, see page 22. 13 13 Business income or loss. Attach Schedule C or C-EZ
  72. 72. 7.TIGHTEN IT ALL UP
  73. 73. v
  74. 74. Welcome to White Space Lorem ipsum dolor sit amet, consectetuerWelcome to White Space adipiscing elit. Curabitur tristique, sapien idLorem ipsum dolor sit amet, consectetueradipiscing elit. Curabitur tristique, sapien id scelerisque euismod, turpis lacus sollicitudin nulla,scelerisque euismod, turpis lacus sollicitudin nulla, non iaculis quam nulla ullamcorper erat. Namnon iaculis quam nulla ullamcorper erat. Namaccumsan laoreet enim. Cras vel lectus. Cum sociis accumsan laoreet enim. Cras vel lectus. Cum sociisnatoque penatibus et magnis dis parturient montes, natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus. Maecenas malesuadamattis metus. Proin vehicula pretium nunc. Donec nascetur ridiculus mus. Maecenas malesuadaest arcu, viverra a, rutrum sit amet, interdum vitae, mattis metus. Proin vehicula pretium nunc. Donecest. Aenean enim orci, faucibus in, posuere et,congue pretium, nunc. Vestibulum sagittis turpis est arcu, viverra a, rutrum sit amet, interdum vitae,vitae pede. Praesent est. Aenean consectetuer est. Aenean enim orci, faucibus in, posuere et,ornare arcu. Nulla rhoncus. congue pretium, nunc. Vestibulum sagittis turpis vitae pede. Praesent est. Aenean consectetuer ornare arcu. Nulla rhoncus. http://jasonsantamaria.com
  75. 75. FLUID
  76. 76. POTENTIALLY LONG LINE LENGTH
  77. 77. FIXED
  78. 78. ENSURE IT’S FLEXIBLE
  79. 79. NEED TO KNOW USER PATTERN
  80. 80. 1. Safe Exploration (Multi-level Undo)2. Instant Gratification (Success Experience)3. Satisficing (Don’t make me Think)4. Changes in midstream (Good Default, Wizard)5. Deffered choices (Extras on demand)
  81. 81. 1. Incremental construction (Good tools make creative actives)2. Habituation3. Spatial Memory (Responsive Disclosure)4. Prospective Memory (Stickey Note)5. Streamlined Repetition (macro)
  82. 82. DO YOUR INFORMATION DESIGNFOR NEXT WEEK GUI STYLE GUIDE

×