Kuali Student User Interface Overview Introduce Speakers Introductions Cindy Nahm: Assistant Registrar from the University of British Columbia. Currently member of the User Experience team. Wil Johnson: System Architect from Florida State University. Lead developer on the Kuali Student UI/UX team. From the University of California, Berkeley, Tim Heidinger is Functional Steering Committee member and currently the team leader of the User Experience team. Rachel Hollowgrass – recently joined our team and currently resided also at the Berkeley campus, is User Experience Expert/Lead for the Kuali Student Project. We are representatives from the Kuali Student UIUX teams. Kuali Days :: Chicago May 13-14, 2008

Session Objectives Kuali Student User Interface Overview User Centered Design Google Web Toolkit (GWT) Questions and Knowledge Sharing Session Objectives User Centered Design (provide you with an overview of the UCD methodology we are using) Google Web Toolkit (GWT) (describe the toolkit selection process and selection critieria) Questions and Knowledge Sharing (opportunity to interact/share information)

User Centered Design Kuali Student User Interface Overview Partnerships Kuali Student 'U' Teams Fluid Project & Berkeley Partnerships/ Collaboration Internal: UC, UX, UI Teams, UX Lead - Project Level External: FLUID Expertise (consultative capacity) Berkeley Design  & UX Lead co-location   In the beginning, outside partners were critical because we lacked UX expertise. Rachel is co-located a couple days a week with other UCD folks at Berkeley (Sakai, Fluid etc.)‏ (Fluid is a collaborative project to help improve the usability and accessibility of community open source projects with a focus on academic software for universities.)

User Centered Design Kuali Student User Interface Overview User Centered Design is a product development methodology based on actual user needs, abilities and perceptions. UCD focuses on understanding: Who are the users? What are their goals? What are their pain points? What are their motivations?

User Centered Design Kuali Student User Interface Overview Methodology User Research User Modeling Requirements Definition UI Framework Definition UI Design Development Support Methodology Informed by Alan Cooper's work 1.) User Research 2.) User Modeling 3.) Requirements Definition 4.) UI Framework Definition 5.) UI Design 6.) Development Support I’d like to touch upon the concept of ‘Personas’ which is an integral part of the UCD methodology. Definition: “A persona is a user archetype you can use to help guide decisions about product features, navigation, interactions and even visual design” – Kim Goodwin, Alan Cooper Rubber Band Activity Here. Ask for Volunteer Rubber band represents the user. When designing large systems, you are often faced with trying to design for all these different people – what about this person or this person or this example etc. The design mistake we sometimes make, is to stretch the “user”. Personas solve the problem of designing for everybody. Take a collection of people and narrow it down to a single individual (a representation) and design for this individual. This individual is the representative of the group and therefore this person acts as a placeholder for that group of people. Personas put a human face on the amorphous “user” because they are based on actual user needs. They save time by focusing development toward real cases and away from unlikely “edge” cases. Enables us to avoid designing for the elastic user (user that stretches to meet any design) Personas: Improves odds that we will see improvement over an existing system Reduces guessing about users needs and wants Based on real data we collect rather than made up information or inferences.  

User Centered Design Kuali Student User Interface Overview Tools Wiki and Axure RP Pro 5 Google Web ToolKit Tools - UC/UX - Wiki & Cooper - UX/UI - Axure - Hand off to Will for GWT

Google Web Toolkit Kuali Student User Interface Overview Why Google Web Toolkit (GWT) Selection Process Selection Criteria Wil's Stuff here

Google Web Toolkit Kuali Student User Interface Overview GWT Benefits Rich Interface Cross browser Internationalization support Accessible Scalable Development Deployment Ease of use Wil's Stuff here

Google Web Toolkit Kuali Student User Interface Overview Simple GWT Example public class HelloGwt implements EntryPoint { public void onModuleLoad() { final Panel panel = new HorizontalPanel(); final TextBox text = new TextBox(); final Button button = new Button("Click Me", new ClickListener() { public void onClick(Widget arg0) { text.setText("Hello GWT!"); } }); panel.add(text); panel.add(button); RootPanel.get().add(panel); Wil's Stuff here

Google Web Toolkit Kuali Student User Interface Overview GWT Service Example public interface HelloService extends RemoteService { public static final String SERVICE_URI = "/HelloService"; // Generated helper class public static class Util { public static HelloServiceAsync getInstance() { // generated code omitted } // service interface definition public String sayHello(String name); Wil's Stuff here public interface HelloServiceAsync { public void sayHello(String name, AsyncCallback callback); }

Google Web Toolkit Kuali Student User Interface Overview GWT Service Example public class HelloServiceImpl extends RemoteServiceServlet implements HelloService { public String sayHello(String name) { return "Hello, " + name; } Wil's Stuff here

Google Web Toolkit Kuali Student User Interface Overview GWT Service Example public class HelloGwt implements EntryPoint { public void onModuleLoad() { final TextBox text = new TextBox(); String name = "Joe Smith"; HelloService.Util.getInstance().sayHello(name, new AsyncCallback() { public void onFailure(Throwable arg0) { text.setText(arg0.getMessage()); } public void onSuccess(Object arg0) { text.setText((String) arg0); }); RootPanel.get().add(text); Wil's Stuff here

Questions and Knowledge Sharing Kuali Student User Interface Overview Contact Information Cindy Nahm <cindy.nahm@ubc.ca> Wil Johnson <wilj@fsu.edu> Tim Heidinger <timh@berkeley.edu> Rachel Hollowgrass <rachel@media.berkeley.edu>