Creating User Interfaces Reprise on guest speaker. Usability checklists. Reprise on user- centered. Semantic tags. Responsive design. Classwork/homework: final project

Purchase website project Comments? Presentations 4/27 – 11:30am, Natural Sciences 1001 – 2:30pm, Humanities 1032

Digression to Processing JS Objective: show Processing examples in a browser – Mainly for family Legacy approach: old Processing could produce applications. New approachs – ProcessingJS and – P5

But… First one (the slingshot) and then another (rotating cubes) did not work. Problem (STATED IN DOCUMENTATION): – Processing handles loadImage synchronously. When loadImage is done, the file is loaded. – JavaScript has asynchronous model. Need to check that loading takes place. Fix from ProcessingJS is a directive in the form of a comment in the code: preload="chicken.gif,feathers.gif";*/

Another improvement for rotating cubes Sister requested something that it rotate by itself. How do you program to catch something not happening?

Answer Keep track of when something happens – Reset a variable Check current time versus time when something last happened. If greater than a set interval, do something. This may be something for your teaching projects. – JavaScript: use setTimeout and allow to stop the event. – Processing: use millis(). Use variable last set in mouseDragged (or the equivalent). Check millis()- last in draw.

Try ocessing/index.html ocessing/index.html (Note: can look at Processing source in the legacy applications and they do work IN the Processing Development Environment.)

Postings on topics? Check moodle Daniel's posting: k/world-map-section/c1_US/c2_BR k/world-map-section/c1_US/c2_BR – For the topic (privacy) and also – For website on a complex matter

Checklists Jakob Nielsen: articles: Note especially: Edward Tufte: books, lectures, and website: Misc: other individuals checklist

Reprise on user-centered Your target audience may not be someone exactly like yourself…. – Reason to give the user a name or categorize groups of users Recall: effectiveness, efficiency, satisfaction – User testing (observation) on specific tasks can provide information on effectiveness and efficiency People can change, adapt, explore…

Change How have you changed your uses of technology?

New technology New technologies change how we use old[er] ones. – Having an iPad changes how I use my phone. – ? Expectations on how something is to be used may get established very quickly. – Working links – Icons on borders (top and left favored) – ?

Note taking experiments See handwriting-make-you-smarter http:// handwriting-make-you-smarter Taking notes any way is better than not taking notes or is it? Details/context/situation matter. For example, for my programming classes, I suggest taking notes on topic of hard copies of my charts AND scheduling time to review the notes!

Turn to HTML: Semantic elements. Addition to HTML5: article, header, nav, etc. Yes, you still can use div and span – Difference? You need to add ALL the formatting – Note: there can be multiple header s, located anywhere, but why do this? Using common terms probably makes it easier to use with others.

HTML5 inputs NOTE: strong caution in article alternative alternative

Aside Many features in programming languages are intended to help large projects, done by multiple people, often in multiple organizations, over time. – Or maybe by one person over time

Responsive design Also: adaptive design. Design intended to work on multiple devices. Various techniques – % for sizes, as opposed to px – float query My home page: NOTE: Should I have used in place of ???

Schedule [Responsive design not requirement for the final project] Check schedule Get user feedback! Preview May 2 Final presentations: May 9 noon – 1-pager: Abstract (summary!!!!), relevant picture or diagram, sources (PROPER format)