158212 week 11 User Interface Design .Net Framework

1
158212 week 11User Interface Design .Net
Framework
2
Why study user interfaces?

• Good UIs are critical to success
• UI programming is
• easy (sophisticated algorithms not required)
• straightforward (can immediately correct
  mistakes)
• fun (results are immediately visible)
• rational (apply simple rules)
• UI design is not graphic design

3
Cardinal axiom

• A user interface is well-designed when the
  program behaves exactly how the user thought it
  would.
• user is happy user in control S/W correctly
  interprets users actions
• loss of control ? depression, frustration(Learne
  d Helplessness)
• All the other rules are just corollaries

4
User and program models

• User model Users idea of whats happening
• Program model Programs idea of whats
  happening (i.e., whats actually happening)
• Successful UI when program model corresponds to
  user model
• Speak users language
• Follow real-world conventions, make information
  appear in natural and logical order
• Use metaphors from real world

5
Example

• Pictures in documents are
• embedded in word processor (e.g., Word)
• not embedded in HTML
• With WYSIWYG HTML editor (e.g., FrontPage), what
  do you do?
• change user model (describe in manual, explain
  with popup dialog box)
• change program model (make copy of picture in
  subfolder)

6
How do you get the user model?

• Ask the users!
• The 50-cent usability test
• Usually 5-6 people is enough, will start to see
  consensus
• Dont need formal usability lab, or people off
  the street
• Just sketch or prototype and ask your neighbor

7
User models are simple

• If your program model is nontrivial, its
  probably wrong

Click here
This window comes to top!
(invisible sheets in Excel)
8
Choices

• Every time you provide an option, you're asking
  the user to make a decision.

A useless wizard dialog
9
Too much freedom is dangerous
floating menu bar
huge system tray
How many users want these?
10
Metaphors
vs.

• Also desktop, folders, paintbrush, ...

11
Affordance

• afford to make available or provide naturally
• (door with metal plate affords pushing)

vs.
(30 usability)
(100 usability)
12
Affordance (cont.)
Where to grab?
Where to click?
What to drag?
13
Consistency, not creativity

• A foolish consistency is the hobgoblin of little
  minds Emerson
• Application should be consistent with itself and
  with other programs
• Examples FrontPage, Visio
• Beware of creativity
• Less like user model
• More work to implement
• Do not leverage future/hidden features
• Just because Microsoft does it, doesn't mean
  it's right
• Examples Tab from name to password, Netscapes
  reimplementation of common controls

14
Make explanations brief

• Users dont read the manual
• May not have the manual (on airplane, demo
  version)
• Too busy / distracted / impatient
• Users dont read anything
• advanced too busy
• novice hope defaults are ok
• in-between try to read but get confused

vs.
15
Many users are intimidated by computers
vs.
vs.
(no dialog)
Which is better for an intimidated user?
16
Users cant control the mouse well

• Whats the problem?
• sub-optimal pointing devices
• bad conditions (dirty, old, or cheap mouse
  crowded desk)
• medical disabilities (young, old, arthritis, ...)
• in a hurry
• Mile-high menu bar
• Macintosh slam mouse to top, get menu
• Windows ½ by ¼-inch target
• Easiest places to point four corners
• (Windows 95 start menu blunder 2 pixels from
  corner)
• 0, 1, or n
• All n1 are not equally likely (window close to
  edge should snap in place)

17
Dont tax the users memory

• Make objects, actions, and options visible
• User should not have to remember (too much)
  information

18
Some bad designs
adaptive menu
office assistant
19
The bell curve

• Users lie on a bell curve
• 98 can use a TV
• 70 can use Windows
• 15 can use Linux
• 1 can program
• Users are not all idiots
• But, the easier you make the program, the more
  people can use it(10 more usable ? 50 more
  users)

20
Activity-based UI

• Two ways of designing UI
• What features should be there?
• Greeting card example add text, add picture,
  get predesigned card from library, send by email,
  print
• What activities will users do?
• Greeting card example birthday greeting, party
  invitation, anniversary greeting(leads to
  unexpected features remind to send next year)
• Example
• Excel was designed for financial
  number-crunching, but many use it for lists
• Improv was to be killer app for NeXT
• great for complicated multi-dimensional financial
  models
• painful for lists

21
Open-ended vs. sequential operation

• History of UI goes back-and-forth
• user-in-control (command-line, Word, ...)
• sequential steps (wizards, ...)

vs.
22
Visual perception
color constancy
font spacing
color-blind 8 of men, 0.5 of women
23
Web-safe colors
dithering may produce other colors
216 can be reproduced on all displays (including
8-bit)
24
Dangers of color
Driving at night where the street lights are
yellow
traffic lightis green
traffic lightis yellow
25
Beyond WIMP

• WIMP (windows, icons, menus, pointers)
• WYSIWYG
• Importance of language
• grouping, conditionals, referring to objects not
  immediately visible or future
• support novice and power-user
• provide concrete and abstract ways of
  manipulation
• keyboard shortcuts / macros
• Shared control
• Delegation of routine or complex tasks to computer

26
Shneiderman's "Eight Golden Rules of Interface
Design"

• 1 Strive for consistency.
• Consistent sequences of actions should be
  required in similar situations identical
  terminology should be used in prompts, menus, and
  help screens and consistent commands should be
  employed throughout.

27
2

• Enable frequent users to use shortcuts.
• As the frequency of use increases, so do the
  user's desires to reduce the number of
  interactions and to increase the pace of
  interaction. Abbreviations, function keys, hidden
  commands, and macro facilities are very helpful
  to an expert user.

28
3

• Offer informative feedback.
• For every operator action, there should be some
  system feedback. For frequent and minor actions,
  the response can be modest, while for infrequent
  and major actions, the response should be more
  substantial.

29
4

• Design dialog to yield closure.
• Sequences of actions should be organized into
  groups with a beginning, middle, and end. The
  informative feedback at the completion of a group
  of actions gives the operators the satisfaction
  of accomplishment, a sense of relief, the signal
  to drop contingency plans and options from their
  minds, and an indication that the way is clear to
  prepare for the next group of actions

30
5

• Offer simple error handling.
• As much as possible, design the system so the
  user cannot make a serious error. If an error is
  made, the system should be able to detect the
  error and offer simple, comprehensible mechanisms
  for handling the error.

31
6

• Permit easy reversal of actions.
• This feature relieves anxiety, since the user
  knows that errors can be undone it thus
  encourages exploration of unfamiliar options. The
  units of reversibility may be a single action, a
  data entry, or a complete group of actions.

32
7

• Support internal locus of control.
• Experienced operators strongly desire the sense
  that they are in charge of the system and that
  the system responds to their actions. Design the
  system to make users the initiators of actions
  rather than the responders.

33
8

• Reduce short-term memory load.
• The limitation of human information processing in
  short-term memory requires that displays be kept
  simple, multiple page displays be consolidated,
  window-motion frequency be reduced, and
  sufficient training time be allotted for codes,
  mnemonics, and sequences of actions.

34
UI Design

• User interface design isnt about icons and
  buttons any more than graphic design is about
  typefaces and bleeds. They are both about
  creating experiences and communicating emotions
  and information.

35
Multimedia UI

• Three steps of multimedia user interface design
  are
• 1 identifying the audience and message
• 2 determining the use setting
• 3 creating a user experience

36

• It is important to understand
• who your audience is
• what you are trying to say
• Need to consider issues such as
• how old the users are
• what kind of experience and structure they prefer
• are the users familiar with multimedia or not?
• what is the best look and feel to convey your
  message?

37

• is also important to understand how the system
  will be used
• at home, work, or a public place
• on a PC, handheld device, or a public kiosk
• personal, one-to-one, or involving many people
• short-term or long-term use

38

• It is necessary to decide what kind of user
  experience to aim for
• should it take the form of a journey?
• should it be like a conversation?
• should it be like reading a storybook?
• should it be like listening to a story?

39
(No Transcript)
40

• Reduce users effort to a minimum
• nothing should be more than three clicks away
• this is a problem with hierarchical structures
• A good interface should be transparent
• interface itself should go unnoticed
• users should focus on what they are doing not on
  how to do it
• functionality can be imbedded in the content

41
A good interface

• Should anticipate what a user may want to do at
  any given time
• things are relevant only at a certain time
• provide only the anticipated functionality
• the right function given at the right time
• create a dynamic experience
• support the less is more philosophy

42
Questions?

• Next The .Net Framework

43
.NET

• is an integral Windows component that supports
  building and running the current generation of
  applications and XML Web services.Distribution
  is the paradigm key

44

• The .NET Framework is designed to fulfill the
  following objectives
• To provide a consistent object-oriented
  programming environment whether object code is
• stored and executed locally,
• executed locally but Internet-distributed,
• or executed remotely.
• To minimise software deployment and versioning
  conflicts.
• To promote safe execution of code, including code
  created by an unknown or semi-trusted third
  party.

45
And

• To eliminate the performance problems of scripted
  or interpreted environments.
• To make the developer experience consistent
  across widely varying types of applications, such
  as Windows-based applications and Web-based
  applications.
• To build all communication on industry standards
  to ensure that code based on the .NET Framework
  can integrate with any other code.

46
Main components of the .Net platform
Visual Studio .Net
VB
C
C
J
Perl
Python

.Net Enterprise Servers
.Net Framework
.Net Web Services
Operating System Servers, desktops,mobile
devices, game consols etc.
47
The Framework

• The .NET Framework is complex, but essentially
  has two main components
• the common language runtime
• the .NET Framework class library.
• ASP.Net is considered by some to be a third
  integrated component of the .Net Framework

48
Common Language Runtime

• The common language runtime is the foundation of
  the .NET Framework.
• You can think of the runtime as an agent that
  manages code at execution time
• providing core services such as
• memory management,
• thread management,
• Remoting (RPC),
• while also enforcing strict type safety and other
  forms of code accuracy that promote security and
  robustness.
• The concept of code management is a fundamental
  principle of the runtime.
• Code that targets the runtime is known as managed
  code, while code that does not target the runtime
  is known as unmanaged code.

49
Class Library(Base Framework)

• The class library is a comprehensive,
  object-oriented collection of reusable types
• It can be used to develop applications
• traditional command-line
• graphical user interface (GUI)
• based on ASP.NET, e.g. Web Forms and XML Web
  services.

50
Components of the .Net Framework
Web Services
Web Forms
Windows Forms
Data
XML
Base Framework (Class Library)
Common Language Runtime (CLR)
MSMQ MS Message Queuing
COM Common Object Model
IIS Internet Information Server
ADO ActiveX Data Objects
Win32
51

• The .NET Framework can be hosted by unmanaged
  components that load the common language runtime
  into their processes and initiate the execution
  of managed code
• Thereby creating a software environment that can
  exploit both managed and unmanaged features.
• The .NET Framework not only provides several
  runtime hosts, but also supports the development
  of third-party runtime hosts.

52
For example,

• ASP.NET hosts the runtime to provide a scalable,
  server-side environment for managed code.
• ASP.NET works directly with the runtime to enable
  ASP.NET applications and XML Web services

53
Example

• Internet Explorer is an example of an unmanaged
  application that hosts the runtime (in the form
  of a MIME type extension).
• Using Internet Explorer to host the runtime
  enables you to embed managed components or
  Windows Forms controls in HTML documents
• Hosting the runtime in this way makes managed
  mobile code (similar to Microsoft ActiveX
  controls) possible,
• but with significant improvements that only
  managed code can offer, such as semi-trusted
  execution and isolated file storage.

54
Common Language Runtime, class library and
overall system
55
Features of the Common Language Runtime

• The common language runtime manages
• memory,
• thread execution,
• code execution,
• code safety verification,
• compilation,
• other system services.
• These features are intrinsic to the managed code
  that runs on the common language runtime.

56
Security

• With regards to security
• managed components are awarded varying degrees
  of trust, depending on a number of factors that
  include their origin (such as the Internet,
  enterprise network, or local computer).
• This means that a managed component might or
  might not be able to perform file-access
  operations, registry-access operations, or other
  sensitive functions, even if it is being used in
  the same active application.

57
Security contd.

• The runtime enforces code access security.
• For example, users can trust that an executable
  embedded in a Web page can play an animation on
  screen or sing a song, but cannot access their
  personal data, file system, or network.
• The security features of the runtime thus enable
  legitimate Internet-deployed software to be very
  feature rich.

58
Code robustness

• The runtime also enforces code robustness by
  implementing a strict type-and-code-verification
  infrastructure called the Common Type System
  (CTS).
• The CTS ensures that all managed code is
  self-describing.
• The various Microsoft and third-party language
  compilers generate managed code that conforms to
  the CTS
• This means that managed code can consume other
  managed types and instances, while strictly
  enforcing type fidelity and type safety.

59
Also

• The managed environment of the runtime eliminates
  many common software issues.
• E.g. the runtime automatically handles object
  layout and manages references to objects,
  releasing them when they are no longer being
  used.
• This automatic memory management resolves the two
  most common application errors, memory leaks and
  invalid memory references.

60
Also

• The runtime may also accelerate developer
  productivity.
• For example, programmers can write applications
  in their development language of choice, yet take
  full advantage of the runtime, the class library,
  and components written in other languages by
  other developers.
• Any compiler vendor who chooses to target the
  runtime can do so.
• Language compilers that target the .NET Framework
  make the features of the .NET Framework available
  to existing code written in that language,
  greatly easing the migration process for existing
  applications.

61
Backward Compatibility

• The runtime is designed to support legacy
  software.
• Interoperability between managed and unmanaged
  code enables developers to continue to use
  necessary COM components and DLLs.

62
Perfomance

• The runtime is designed to enhance performance.
• Although the common language runtime provides
  many standard runtime services, managed code is
  never interpreted.
• A feature called just-in-time (JIT) compiling
  enables all managed code to run in the native
  machine language of the system on which it is
  executing.
• Meanwhile, the memory manager removes the
  possibilities of fragmented memory and increases
  memory locality-of-reference to further increase
  performance.

63
And

• The runtime can be hosted by high-performance,
  server-side applications, such as MS-SQL Server
  and Internet Information Services (IIS).
• This infrastructure enables the use of managed
  code to write business logic, and first-choice
  enterprise servers supporting runtime hosting for
  superior performance

64
.NET Framework Class Library

• The .NET Framework class library is a collection
  of reusable types that tightly integrate with the
  common language runtime.
• The class library is object oriented, providing
  types from which managed code can derive
  functionality. This not only makes the .NET
  Framework types easy to use, but also reduces the
  time associated with learning new features of the
  .NET Framework.
• Also, third-party components can integrate
  seamlessly with classes in the .NET Framework.
• For example, the .NET Framework collection
  classes implement a set of interfaces that can be
  used to develop collection classes. These
  collection classes will blend seamlessly with the
  classes in the .NET Framework.

65
Constituent parts of the CLR
Base Class Library Support
Thread Support
COM Marshaler
Type Checker
Exception Manager
Security Engine
Debug Engine
IL to native compilers IL platform independent
code created by compilers
Code Manager
Garbage Collector
Class Loader
66
Wait, theres more

• .NET Framework types enable tasks such as
• string management,
• data collection,
• database connectivity,
• file access.
• In addition to these common tasks, the class
  library includes types that support a variety of
  specialised development scenarios. E.g. you can
  use the .NET Framework to develop the following
  types of applications and services
• Console applications.
• Windows GUI applications (Windows Forms).
• ASP.NET applications.
• XML Web services.
• Windows services.

67
Client Application Development

• Client applications are the closest to a
  traditional style of application in Windows-based
  programming.
• These are the types of applications that display
  windows or forms on the desktop, enabling a user
  to perform a task.
• Client applications include applications such as
  word processors and spreadsheets, as well as
  custom business applications such as data-entry
  tools, reporting tools, and so on.
• Client applications usually employ windows,
  menus, buttons, and other GUI elements and they
  likely access local resources such as the file
  system and peripherals such as printers.

68

• Another kind of client application is the
  traditional ActiveX control (now replaced by the
  managed Windows Forms control) deployed over the
  Internet as a Web page.
• This application is much like other client
  applications it is executed natively, has access
  to local resources, and includes graphical
  elements.

69

• Before .Net, developers created such applications
  using C/C in conjunction with the Microsoft
  Foundation Classes (MFC) or with a rapid
  application development (RAD) environment such as
  Microsoft Visual Basic, Borland Delphi etc.
• The .NET Framework incorporates aspects of these
  existing technologies into a single, consistent
  development environment that simplifies the
  development of client applications.

70

• The Windows Forms classes contained in the .NET
  Framework are designed to be used for GUI
  development.
• Can easily create command windows, buttons,
  menus, toolbars, and other screen elements with
  the flexibility necessary to accommodate shifting
  business needs.

71

• For example, the .NET Framework provides simple
  properties to adjust visual attributes associated
  with forms.
• In some cases the underlying operating system
  does not support changing these attributes
  directly and in these cases the .NET Framework
  automatically recreates the forms.
• This is one of many ways in which the .NET
  Framework integrates the developer interface,
  making coding simpler and more consistent.

72

• Unlike ActiveX controls, Windows Forms controls
  have semi-trusted access to a user's computer.
• This means that binary or natively executing code
  can access some of the resources on the user's
  system (such as GUI elements and limited file
  access) without being able to access or
  compromise other resources.
• Because of code access security, many
  applications that once needed to be installed on
  a user's system can now be deployed through the
  Web.
• Applications can implement the features of a
  local application while being deployed like a Web
  page.

73
Server Application Development

• Server-side applications in the managed world are
  implemented through runtime hosts.
• Unmanaged applications host the common language
  runtime, which allows managed code to control the
  behavior of the server.
• This model provides all the features of the
  common language runtime and class library while
  gaining the performance and scalability of the
  host server.
• The following illustration shows a basic network
  schema with managed code running in different
  server environments. Servers such as IIS and SQL
  Server can perform standard operations while the
  application logic executes through the managed
  code.

74
Server-side managed code

75

• ASP.NET is the hosting environment that enables
  developers to use the .NET Framework to target
  Web-based applications.
• ASP.NET is more than just a runtime host it is a
  complete architecture for developing Web sites
  and Internet-distributed objects using managed
  code.
• Both Web Forms and XML Web Services use IIS and
  ASP.NET as the publishing mechanism for
  applications and both have a collection of
  supporting classes in the .NET Framework.

76

• XML Web Services are distributed, server-side
  application components similar to common Web
  sites.
• However, unlike Web-based applications, XML Web
  services components have no User INterface and
  are not targeted for browsers such as Internet
  Explorer and Netscape Navigator.
• Instead, XML Web services consist of reusable
  software components designed to be consumed by
  other applications, such as traditional client
  applications, Web-based applications, or even
  other XML Web services.
• As a result, XML Web services technology has
  shifted application development and deployment
  into the highly distributed environment of the
  Internet.

77
SOAP, XML WSDL

• The .NET Framework also provides a collection of
  classes and tools to aid in development and
  consumption of XML Web services applications.
• XML Web services are built on standards such as
• SOAP (a remote procedure-call protocol),
• XML (an extensible data format),
• WSDL ( the Web Services Description Language).
• The .NET Framework is built on these standards to
  promote interoperability with non-Microsoft
  solutions.

78

• E.g. Web Services Description Language tool can
  query an XML Web service, parse its WSDL
  description, and produce C or Visual Basic
  source code
• Enabling the application to become a client of
  that XML Web service.
• The source code can create classes derived from
  classes in the class library that handle all the
  underlying communication using SOAP and XML
  parsing.
• (parsing is the process of analyzing an input
  sequence in order to determine its grammatical
  structure with respect to a given formal grammar)

79
Summary

• Components of .Net framework
• Development tools
• .Net languages
• .Net servers
• Class library
• Common Language Runtime
• Consequential paradigm shift for developers

80
Questions?

• Next week
• Test review Exam preview (short so dont be
  late!)