Build Service/WebClientIdeas

From openSUSE

Contents 1 Personas (Who) 1.1 Peter Packager 1.1.1 Social 1.1.2 Know How 1.1.3 Peter Packager's Linux related targets 1.2 Soren Software Vendor 1.3 Ingvar Internal IT 1.4 Enya Enthusiast 1.4.1 Social 1.4.2 Know How 1.4.3 Enya's Linxu related targets 2 Goal 3 User and Task Analysis 3.1 Idea collector for a online questionnaire 4 Problems (What) 5 Requirements 6 Usage Scenarios 7 Widgets 8 Design 8.1 Functionality 8.1.1 Dashboard 8.1.2 Project 8.1.3 Package 8.1.4 Browse 8.1.5 Build Service Status 8.2 Site Structure 8.3 Wireframes 8.3.1 Basic Structure 8.3.2 Possible Object Placement 8.3.3 Portlet Structure 8.3.4 Portlet: Project Monitor 8.4 Layout and Design Studies

openSUSE Build Service Developer Web Interface

Personas (Who)

The personas briefly introduce prototypical users of our product, the OBS and it's webinterface.

The personas help to prioritize, if we focus on one or the other persona first.

Peter Packager

Social

• Age: 36, Married, 2 Children

Know How

• studied software engineering
• works full-time as software engineer
• uses LINUX for several years (work|home), more than five years as professional
• experienced in software packaging, seasoned package maintainer of one or two packages in some distro
• interested in tech-stuff

Peter Packager's Linux related targets

• improve Linux distributions
• share some software regardless of the distribution
• focus on 'interesting' stuff, reduce 'boring', repetitive things

Soren Software Vendor

• software engineer
• unix/Linux X-plat shop
• responsible for installation and distribution

• wants to use OBS to simplify at least the linux build and test automation
• wants to release his software when we do
• runs his own obs

Ingvar Internal IT

• software engineer
• large IT department
• in-house development
• very heterogenous environment

• wants to use OBS to simplify Linux build, test and internal deployment

Enya Enthusiast

Social

• Age: 26, single

Know How

• studies Philosophy (and this and that)
• spends a lot of time with friends at university
• interested in computer and software development
• likes community and discussions
• curious and open for new things
• new to software packaging
• knows a bit <PROGRAMMING LANGUAGE>
• euphoric LINUX user since three years
• interested in OBS

Enya's Linxu related targets

• share his little software solution
• have fun
• learn something new
• be part of the community

Goal

The user want to create and share installable software packages for different Linux distribution.
He expects a well designed source-, package- and project management.

User and Task Analysis

Idea collector for a online questionnaire

Based on some brainstorming; not sorted not weighted!

• Which hardware is available?
  • Does some users want to use a mobile device?
  • What is the minimum/maximum size of screen?

• When does the user want to control his jobs?
  • Is it important to provide a kind of email feedback or something similar?

• Items representing a kind of wish list: "It would like to have a..."
  • Quick info portlet
  • Profiles for different devices/displays
  • Possibility to share my profiles

• Number of projects an packages
  • What is the average number of projects and packages managed by a user or a group of users
  • Can we get some statistics from the server here?

• Questions concerning the used hardware
  • How to find a solution for people with two sets of hardware (e.g. home, work)

• Problem: privat use vs. professional use
  • Will we have "professional power-users"?
  • Will we have "users playing around once in a while"?

• What to you want to build?
  • [ ] Windows?
  • [ ] Apple?

• Check importance:
  • Importance to select out of different themes
  • Importance to create a local build service
  • Is it necessary to inform others about progress?
  • Concept of a kind of shoutbox
  • Use of macros, create own short cuts

• Collaboration aspects
  • Check how a team will use the obs
  • Which activities of other team members should be monitored/displayed?
    • User a changed b, presence, notes, ...

• Sozdem Fragen:
  • Development experience
  • OBS experience
  • Age, gender, job, etc.
  • Number of packages, projects
  • Connection to obs
  • Use of terminal vs. obs gui
  • Browser statistics
  • Visually impaired users?
  • Color blindness?

• Accessibility
  • Use of text mode browsers

• Open Questions:
  • ...

Problems (What)

Requirements

Usage Scenarios

Widgets

Design

Functionality

We discovered 5 interaction-areas for the new OBS Webclient.

1. Dashboard
2. Project
3. Package
4. Browse
5. Build Service Status

This areas contain functionalities which are listed below: (not finished)

Dashboard

• Watch-list
• Widgets
• Configure Profile
• Manage Widgets

Project

• View Project
• Configure Project
• Manage Repository
• Find related repository/packages automatism

Package

• View Packages
• Configure Package
• Widgets

Browse

• List Projects/Packages
• Filter Projects/Packages
• Search Projects/Packages

Build Service Status

• Monitor
• Statistics

Site Structure

1st draft

Wireframes

This wireframes-graphics show just possible structures. They are not a layout!

Basic Structure

The basic structure of a OBS webclient-page and the grid where objects may be placed.

Wireframe: Basic Structure

Wireframe: Grid 1

Wireframe: Grid 2

Wireframe: Grid 3

Possible Object Placement

The object placement on single interaction-level. This demonstrate the previously shown grids.

Dashboard	Project	Package	Browse
Monitor or Statistic

Portlet Structure

The structure of a portlet.

Multi-Row Portlet	1-Row Portlet; Icon-View	1-Row Portlet; List-View	Notification Portlet
Search & Filter Portlet

Portlet: Project Monitor

In the first graphic (Project-Monitor Overview) is shown the overview table. The "Repo" should be finally displayed by an icon. The build status is going to be displayed by colours, in form of a coloured e.g. div or a graphic, as shown in sigis mockup, to save space.

In the case of filtering the monitor-output, it would make sense in some cases to leave the overview-table-view an switch over to a more simplified one shown in figure 2 (Filter-View). E.g. filtering for "build-status". The advantage of the second view is, that it's easier to skim, easier to print out and easier to access the log file.

Finally the Filter-View-Portlet can be uses as base as the standard search and filter screen-design.

Project-Monitor Overview

Filter-View

Layout and Design Studies

Study with minimalistic design in BW. Tried to re-order the elements available at 'home:user'.

by sigi