Web Content Development Dr. Komlodi Class 22: Wirerfames

Moving from Strategy to Design Focus shifts to creating products and deliverables (site map, application flow, wire frame, content inventory) Information architects have to create visual representations for things that are inherently NOT visual (information organizations, navigation, interaction, etc. – not graphics design)

Scope of all Deliverables –Site Scope Report = Flight Plan Problem, solution, strategy –Blue Print = 30,000 feet Conceptual overview of the site –Application Flow = 15,000 feet Detailed interaction between user & system –Wire Frame = 10,000 feet Detailed view of key pages –Content Inventory = 5,000 feet All of the site content by page. The Tie That Binds: A unique ID system from Site Map

Evolution of a Site Information (Content Inventory) Interaction (App Flow, Wire Frame) Purpose (Site Scope & Blue Print)

Wire Frames “Depict how an individual page should look from an architectural perspective.” –IA for WWW, p. 307 Created for the site’s most important pages: –homepage –main pages –major category pages –search Serve as templates Closest you get to visual design in IA

Roles of Wireframes Represent the architectural structure of pages Include the design of navigation systems: –Grouping –Ordering –Layout Testing navigation system: –Too much or too little? –Space for content?

Design Student Advising Home Page

ISRC Directory ISRC Research Sponsors About Us Interactive System Research Center Our mission is to investigate the design, implementation, and evaluation of interactive systems with the purpose of supporting the development of systems that are both usable and accessible. Our emphasis is two-fold: theoretical contributions and practical results. Through theoretical contributions, we advance our knowledge and understanding of how humans interact with information technologies. Through practical results, we improve the lives of those individuals that interact with these technologies. Our current work is highlighted below. Earlier efforts are documented in publications. Search: The ISRC is in need of participants for various studies conducted in their usability lab. If eligible, participants will be compensated based on the study. Participate in a study! Sign up here Current members -Content-based document conversion -Cross cultural HCI and user interface design -Data entry for mobile devices -Designing effective distributed documents -Evaluating evaluation techniques -Guidelines for Design and Measurement of Interface Consistency on the Web -Information visualization tools for intrusion detection -Instant messaging Current Studies Recent News: May 12, 12:00-1:00pm, Dr. Ant Ozok, Cell Phone vs. Computer: A Comparison of Electronic Commerce and Mobile Commerce from the User s Perspective April 28, 12:00-1:00pm, CHI 2003 Conference Reports, Rm 344 Academic IV B wing UMBC A N H O N O R U N I V E R S I T Y I N M A R Y L A N D Basic Navigation A list of current studies at the ISRC Place where prospective participants and researchers can sign in/sign up A current listing of news Search for information within the site Discussion Forum Sign-in Events

ResearchSponsorsEvents Search: UMBC A N H O N O R S U N I V E R S I T Y I N M A R Y L A N D ISRC Interactive System Research Center PREV MARCH NEXT Su Mo Tu We Th Fr Sa Sign-in Discussion Forum ISRC Directory ***Click any date that is underlined. Then the schedule of the lab for the date will be displayed on the right. March 2, :00 available :00 available : :00 available :00 available :00 available : :00 available : :00 Announcements: The usability lab will be closed on the week of March 22nd. Dates cannot be reserved at this time because of Spring Break April 28, 12:00-1:00pm, Faculty meeting 4th floor ITE conference room Calendar for Scheduling For the usability lab Welcome, Dr. Komlodi Below is the calendar to help you scheduling for the usability lab Welcome message and brief explanation of current page Display of member-relevant announcements Display of available times to schedule a usability lab Link to return to ISRC Home page About Us Schedule Date(s)Select All

Types of Wireframes Low & medium fidelity (pp ): –Faster –Non-threatening for visual designers High fidelity wireframes (p. 312): –Are more believable and an be more acceptable –Can support usability testing –Can show technical and visual limitations –Can focus on visual design too much and ignore architecture

High FidelityLow Fidelity

Wire Frame Tips Keep them consistent Use template for all pages Use callouts Page numbers, page titles, project titles, last revision date Don’t build a wire frame for every page in the site. Only those “that are complicated, unique or set a pattern for other pages (i.e., templates)” Use PowerPoint –Most people have it which means it can be shared electronically –Easy to create templates Look at handout for details