Difference between revisions of "User Interface Engineering"

From MPDLMediaWiki
Jump to navigation Jump to search
m
 
(182 intermediate revisions by 4 users not shown)
Line 1: Line 1:
<accesscontrol>UIE,,</accesscontrol>
{{Template:TemplateUIE_Activities}}
<div style="float:left; width:70%; margin-bottom:3em;">
'''User Interface Engineering''' is to design interfaces with the focus on the user's experience and interaction. The goal is to make solutions as simple and efficient as possible.
 
== Our Goals ==


<div style="float:left; width:70%; margin-bottom:3em;">
[[Image:uie_process.png|thumb|left|275px|UIE-Process ]]
== Welcome to UIE ==


'''Human Centered Design'''
User Interface Engineering (UIE) shapes usability, accompanying all phases from requirements to specification and productive deployment. The UIE Team actively participates in the release process of applications, with influence on scope, design and implementation.
[[Image:uie_process.png|right|300px|UIE-Process ]]
The UIE Team actively participates in the release process of applications, with influence on scope, design and implementation. UIE shapes usability, accompanying all phases from requirements to specification and productive deployment.


Detailed evaluation of the human machine interface is an effective method for designing a better user experience.
The approach aims at establishing a 'Usability Engineering Lifecycle'<ref>Deborah J. Mayhew (1999): The Usability Engineering Lifecycle. A Practitioner's Handbook for User Interface Design. Morgan Kaufmann</ref> for interfaces developed at the Max Planck Digital Library. The first interfaces to go through a complete life cycle is the [[ESciDoc_Overview|eSciDoc]] publication management solution (PubMan). Interfaces for digital collections of books and images are addressed as well.


=== Fields of work ===
A long term goal is to balance design, (user) performance and accessibility as far as possible because interfaces need to reflect also the cultural and organizational affiliation. For web applications browser compatibility is considered as well.


'''Interface Conception & Design by Prototyping'''
<div style="text-align:center; padding:3.5% ">
''Because it’s neither the developer’s, nor the organization’s interface. It’s the user’s interface.''
</div>


From early drafts to productive use, each interface is designed and visualized using interface prototypes to provide an outlook on the solution at an early point in time.
Short iteration cycles enable usability evaluation right from the beginning. Optimal information architecture and metaphors can be designed in close cooperation with users, making usability more predictable.


'''Analysis & Evaluation'''
== Fields of work ==
Our '''fields of work''' are structured in some more technical and other more visual oriented…
===Interface Analysis & Evaluation===


Detailed evaluation of the human machine interface is an effective method for designing a better user experience. Modern web applications are expected to deliver a high degree of usability. User participation within the development process is essential to meet those expectations. To balance the developer’s perspective, proven methods such as workshops and usability tests are applied to ensure the necessary degree of user participation in interface development.
Detailed '''[[:Category:User Interface Evaluation|evaluation]]''' of the human machine interface is an effective method for designing a better user experience. Modern web applications are expected to deliver a high degree of usability. User participation within the development process is essential to meet those expectations. To balance the developer’s perspective, proven methods such as '''[[Evaluation GUI Workshops|workshops]]''' and '''[[User Interface Evaluation/Workshops/R3 Interview Analysis|usability tests]]''' are applied to ensure the necessary degree of user participation in interface development.


Applied Methods
===Interface Conception & Design===


* UIE Workshops
From early '''[[:Category:Interface Drafts|drafts]]''' to productive use, each interface is designed and visualized using interface '''[[GUI Prototyping|prototypes]]''' to provide an outlook on the solution at an early point in time.
* Expert Interviews
Short iteration cycles enable usability evaluation right from the beginning. Optimized information architecture and navigation can be designed in close cooperation with users, making usability more predictable.
* Usability Interviews


'''Interface Development'''
===Interface Development===


Within the institutes of the Max Planck Society there are many different needs for new or improved software solutions. It is almost impossible to build individual GUIs on top of them.
Within the institutes of the Max Planck Society there are many different needs for new or improved software solutions. It is almost impossible to build individual GUIs on top of them.
Interfaces developed by UIE use basic patterns, based upon a style guide for web applications. As far as possible, new services are built on reusable components, so that new interface elements will be implemented along with proven ones. Every component has a defined pattern, css definitions and (JavaScript) behaviour and is documented in detail.
Interfaces developed by UIE use basic patterns, based upon a style guide for web applications. As far as possible, new services are built on reusable components<ref >[http://en.wikipedia.org/wiki/Reusability Wikipedia on Reusability]</ref>, so that new interface elements will be implemented along with proven ones. Every component has a defined pattern, css definitions<ref >[http://www.w3.org/Style/CSS/ The World Wide Web Consortium page on CSS]</ref> and (JavaScript) behaviour and is documented in detail.
 
==Methods==
To make sure that we find out the needs of the user we have to involve him before we start and when we finished our work we control the result.
 
{| class="wikitable"
|+ Methods
! Inquirie
! Testing
!Inspection
|-
| Expert Interviews: "Rapid Control Prototyping"<ref>[http://de.wikipedia.org/wiki/Rapid_Control_Prototyping Wikipedia on Prototyping]</ref> and "Paper Prototypes"
| Thinking Aloud Interviews: "[[User_Interface_Evaluation#Usability_Interviews_.28Thinking_Aloud.29|Thinking Aloud]]"<ref name="Thinking Aloud">[http://en.wikipedia.org/wiki/Comparison_of_usability_evaluation_methods Wikipedia - Comparison of Usability Methods]</ref>
| Cognitive Walkthroughs
|-
| UIE Workshops: "Card Sorting"<ref>[http://dmt.fh-joanneum.at/projects/ebus2/seite.php?name=Card_Sorting FH JOANNEUM Gesellschaft mbH zu Testverfahren]</ref> and "Wireframes"<ref>[http://en.wikipedia.org/wiki/Website_wireframe Wikipedia on wireframes], [http://wireframes.linowski.ca/ The Wireframes Magazine]</ref>
|
| Zelle C2
|-
|
|
| Zelle C3
|}
 
===Inquiries===


<div style="float:right; width:27%; margin-bottom:3em; border:solid thin silver"  >
* Expert Interviews: "Rapid Control Prototyping"<ref>[http://de.wikipedia.org/wiki/Rapid_Control_Prototyping Wikipedia on Prototyping]</ref> and "Paper Prototypes"
{| cellpadding="5" border="none"  
* UIE Workshops: "Card Sorting"<ref>[http://dmt.fh-joanneum.at/projects/ebus2/seite.php?name=Card_Sorting FH JOANNEUM Gesellschaft mbH zu Testverfahren]</ref> and "Wireframes"<ref>[http://en.wikipedia.org/wiki/Website_wireframe Wikipedia on wireframes], [http://wireframes.linowski.ca/ The Wireframes Magazine]</ref>
! style="background-color:#f9f9f9;" colspan="4"|Featured Projects
 
===Testing===
 
* Thinking Aloud Interviews: "[[User_Interface_Evaluation#Usability_Interviews_.28Thinking_Aloud.29|Thinking Aloud]]"<ref name="Thinking Aloud">[http://en.wikipedia.org/wiki/Comparison_of_usability_evaluation_methods Wikipedia - Comparison of Usability Methods]</ref>
 
===Inspections===
 
* Cognitive Walkthroughs
 
==Insight==
 
Some working results…
 
{|{{Prettytable}} class="wikitable center"
! style="background-color:#f9f9f9; text-align:left; padding:6px" colspan="3" | INTERFACE WORK
|-
|-
|width="27%" align="center"|
|
<imagemap>
<imagemap>
Image:uie_process.png|120px
Image:pubman6_screenshot_list.png|120px
default [[Portal:ESciDoc|eSciDoc Portal]]
default [http://pubman.mpdl.mpg.de/pubman/faces/SearchResultListPage.jsp?cql=(+(+escidoc.metadata%3D%22Review%22+)++or++(+escidoc.any-identifier%3D%22Review%22+)++not++(+escidoc.context.objid%3D%22Review%22+)++not++(+escidoc.created-by.objid%3D%22Review%22+)++and++(+escidoc.objecttype%3D%22item%22+)+)+and++(+escidoc.content-model.objid%3D%22escidoc%3Apersistent4%22+)+ PubMan R4]
desc none
desc none
|-
</imagemap>
</imagemap>|width="27%" align="center"|<imagemap>
Publication Management
Image:EScience_Seminare_klein.jpg|120px
 
default [[Portal:EScience_Seminars|Portal eScience Seminars]]
(PubMan R4)
desc none
|
|-
<imagemap>
</imagemap>| width="27%" align="center"|'''Open Access''']]|
Image:FACES_3.jpg|120px
|width="25%" align="center"|<imagemap>
default [http://faces.mpib-berlin.mpg.de/search/result/2/12/emotion/asc/emotion/asc/emotion/desc/groupb]
Image:KIM.png|75px
default [[Portal:TWR|TWR Portal]]
desc none
desc none
</imagemap>
</imagemap>
|-
Metadata &
 
Image Handling
|
[[Image:ViRR_2.1.jpg|center|120px|Digitization Lifecycle]]
Digitization Lifecycle
|}
|}
</div>
 
[[Image:uie_visual.png]]
 
<br>
<br>
<br>
<br>


</div>
==References==
<div style="float:right; width:27%; margin-bottom:3em; border:solid thin silver"  >
<references/>
{| border="0" cellpadding="5" cellspacing="0" align="right"
! style="background-color:#f9f9f9; " |Test
|-
|!  |
*2009-06-15: [http://www.kcl.ac.uk/iss/research/ref/ref3.html '''Research Excellence Framework (REF) Event'''] in London, England
*2009-06-15/16: [http://www.escidoc.org/ '''eSciDoc Days 2009'''] in Karlsruhe, Germany
*2009-06-16/17: [http://www.econ.mpg.de/files/2009/workshops/it_swws09/ '''Software Workshop 2009'''] in Jena, Germany
*2009-06-17/19: [http://indico.cern.ch/conferenceDisplay.py?confId=48321 '''OAI6'''] in Genevy, Siwtzerland
 
'''Like to promote another event?''' Add it to the page [[CoLab Upcoming Events|Upcoming Events]].
|}
</div>
</div>


[[Category:User Interface Engineering]]
[[Category: User Interface Engineering]]

Latest revision as of 12:03, 19 September 2011

User Interface Engineering is to design interfaces with the focus on the user's experience and interaction. The goal is to make solutions as simple and efficient as possible.

Our Goals[edit]

UIE-Process

User Interface Engineering (UIE) shapes usability, accompanying all phases from requirements to specification and productive deployment. The UIE Team actively participates in the release process of applications, with influence on scope, design and implementation.

The approach aims at establishing a 'Usability Engineering Lifecycle'[1] for interfaces developed at the Max Planck Digital Library. The first interfaces to go through a complete life cycle is the eSciDoc publication management solution (PubMan). Interfaces for digital collections of books and images are addressed as well.

A long term goal is to balance design, (user) performance and accessibility as far as possible because interfaces need to reflect also the cultural and organizational affiliation. For web applications browser compatibility is considered as well.

Because it’s neither the developer’s, nor the organization’s interface. It’s the user’s interface.


Fields of work[edit]

Our fields of work are structured in some more technical and other more visual oriented…

Interface Analysis & Evaluation[edit]

Detailed evaluation of the human machine interface is an effective method for designing a better user experience. Modern web applications are expected to deliver a high degree of usability. User participation within the development process is essential to meet those expectations. To balance the developer’s perspective, proven methods such as workshops and usability tests are applied to ensure the necessary degree of user participation in interface development.

Interface Conception & Design[edit]

From early drafts to productive use, each interface is designed and visualized using interface prototypes to provide an outlook on the solution at an early point in time. Short iteration cycles enable usability evaluation right from the beginning. Optimized information architecture and navigation can be designed in close cooperation with users, making usability more predictable.

Interface Development[edit]

Within the institutes of the Max Planck Society there are many different needs for new or improved software solutions. It is almost impossible to build individual GUIs on top of them. Interfaces developed by UIE use basic patterns, based upon a style guide for web applications. As far as possible, new services are built on reusable components[2], so that new interface elements will be implemented along with proven ones. Every component has a defined pattern, css definitions[3] and (JavaScript) behaviour and is documented in detail.

Methods[edit]

To make sure that we find out the needs of the user we have to involve him before we start and when we finished our work we control the result.

Methods
Inquirie Testing Inspection
Expert Interviews: "Rapid Control Prototyping"[4] and "Paper Prototypes" Thinking Aloud Interviews: "Thinking Aloud"[5] Cognitive Walkthroughs
UIE Workshops: "Card Sorting"[6] and "Wireframes"[7] Zelle C2
Zelle C3

Inquiries[edit]

  • Expert Interviews: "Rapid Control Prototyping"[8] and "Paper Prototypes"
  • UIE Workshops: "Card Sorting"[9] and "Wireframes"[10]

Testing[edit]

Inspections[edit]

  • Cognitive Walkthroughs

Insight[edit]

Some working results…

INTERFACE WORK
Pubman6 screenshot list.png

Publication Management

(PubMan R4)

FACES 3.jpg

Metadata &

Image Handling

Digitization Lifecycle

Digitization Lifecycle

Uie visual.png



References[edit]

  1. ↑ Deborah J. Mayhew (1999): The Usability Engineering Lifecycle. A Practitioner's Handbook for User Interface Design. Morgan Kaufmann
  2. ↑ Wikipedia on Reusability
  3. ↑ The World Wide Web Consortium page on CSS
  4. ↑ Wikipedia on Prototyping
  5. ↑ 5.0 5.1 Wikipedia - Comparison of Usability Methods
  6. ↑ FH JOANNEUM Gesellschaft mbH zu Testverfahren
  7. ↑ Wikipedia on wireframes, The Wireframes Magazine
  8. ↑ Wikipedia on Prototyping
  9. ↑ FH JOANNEUM Gesellschaft mbH zu Testverfahren
  10. ↑ Wikipedia on wireframes, The Wireframes Magazine

User Interface Engineering

Publication Management

Retrieved from "https://colab.mpdl.mpg.de/mw010/index.php?title=User_Interface_Engineering&oldid=68634"