HCI Stuttgart Homepage

Hello, this is the repository for the webpage of the Human-Computer Interaction group at the University of Stuttgart, headed by Michael Sedlmair.

If you are a (associated / alumnus) member and want to contribute, please first read this readme.

If you have any questions, feedback, or feature suggestions, please contact Chris Krauter.

The live version of this webpage can be found here: visvar.github.io.

How to Add Content and Update the Webpage

Only change files as described in the folders below; nothing else!

After adding new content, you can just commit your changes! They will be compiled and deployed automatically after ~5 minutes.

To test your changes locally, you can

1. run npm i to install/ update the used packages
2. Compile the page

Update the "About" Page

The main page is inside aboutus.html.

Add Publications

Example entries can be found here.

Publications are stored in two files depending on the authors' affiliation with the group at the time of publication:

• bibliography_group.bib
  • published during group membership
• bibliography_prior.bib
  • published before joining the group

General:

• Read the Bibliography Rules
• You can use Unicode (e.g., é, â, ..) but NOT LaTeX (e.g., \c{c}, \"{a})
• Add as much information as possible
• Use bibstrings where possible (see booktitle)
• Clean up your entry as you would for the references in a camera-ready paper
• Always add a teaser.
  • If your paper does not have any pictures: Add a screenshot of the first page with title and authors. See xiao2024systematic for an example.
• Add PDFs as files if possible.
  • It depends on the publisher's policy under which circumstances you are allowed to upload pdfs. Check Open Policy Finder for the respective policy for your publisher.
    • Hint: ACM usually allows authors version, IEEE usually needs copyright hint on first page. But its your responsibility to check!
    • Add IEEE copyright notice per script
      • npm run ieeecopyright -- <citationkey>
      • Example: npm run ieeecopyright -- abbas2019eurovis
      • If citation key does not include a year, pass it as a second argument
      • The script checks if the copyright notice is on the first page of the pdf. No OCR for images though.

Files

Media names must match the publication's key in the bibliography file.

• assets/img/teaser/ for publication teasers (must be .png)
• assets/pdf/ for PDFs.
• assets/suppl/ for supplemental material (must be .zip).
• assets/video/ for videos (must be .mp4).
  • There can be two videos files for each publication named {citation_key}.mp4 and {citation_key}_2.mp4

Bibliography Rules

Base

citation key

• The pattern for keys is <lastname><Year><FirstWord> (example: heyen2020clavis).
  • Add an increasing number (2,3,...), if necessary for uniqueness

author

• Standard bibliography author rules
  • Authors separated by and
  • Three variants
    • First von Last
    • von Last, First
    • von Last, Jr, First
  • e.g.: author = {Simeon Rau and Michael Sedlmair},
  • e.g.: author = {Rau, Simeon and Sedlmair, Michael},
• Author names of members must match those in config.js.
  • If this is violated, the publication will not show up on a members page.

year and month

• Use year and month, not date
• Add month in numbers, not names or abbrevations (January = 01)

doi

• Enter the full DOI URL, not just the DOI (i.e., https://doi.org/<your.doi.here>)

booktitle / journal

• Add the shorthand (without {} parantheses) as described in cleaned_bibstring.bib and it get's replaced automatically
  • e.g. booktitle = CHI,
  • e.g. jounral = TVCG,
• If no cleaned version is available for your booktitle, please clean it accordingly and update cleaned_bibstring.bib.

venue

• Please add the abbreviation of the publication venue (journal, conference, ...), even if that information is already in 'journal', 'booktitle', or 'series'. If there is no abbreviation, use the full (cleaned) journal or booktitle.
  • e.g. venue = {CHI},

publisher

• Please use shortened names (e.g., ACM instead of Association for Computing Machinery, ...)

address

• Add the address of the publisher for conference papers, but not for journal papers

abstract

• Add your abstract without any formatting, newlines, or LaTeX commands!

Optional

video and video2

• If there are videos available online, you can add links to them here.
• Please fill video before video2
• Embedding YouTube videos
  • To embed a YouTube video, you have to enter the embedding link.
  • You get that by clicking on 'sharing' on YouTube and selecting 'embed'.
  • Then, only copy the link into video/video2. The link looks like https://www.youtube.com/embed/<id>?si=<another id>.
  • Do NOT copy the whole embedding code.

pdf

• Only have a link to your PDF? Add it here.
• You have a PDF file (see Files), you do not need this key in your bib entry.

suppl

• Only have a link to your supplemental material? Add it here.

acks

• You can add your acknowledgements here to be displayed on the publications page

funding

• You can add funding information here to be displayed on the publications page

url

• Add any additional URL, but NOT the doi again!

url2

• You can add another link for or about your publication. Not the DOI again, though.

badge

• To display one or multiple icons for a publication, add the repsective word in this bib entry. Separate multiple entries with a ',' ano no spaces. The badge(s) will be shown next to the publication's title on the main page and on the publication's own page.
  • Available badges:
    • bestpaper, honorablemention, nomination, reproducibility, openaccess
  • With added badge(s), there needs to be a small sentence describing it/them at the end of the note-entry. This information will be shown on the publications page. E.g., 'Received an honorable mention award'.

note

• You can add any note here, and it will be displayed on the page of your publication

footnoteindices and footnotetext

• Use for author footnotes, e.g., co-first authorship
• footnoteindices: add position of authors with a footnote (starts at 0)
  • e.g., {0,1} for first and second author
• footnotetext: add text to be shown
  • e.g., {contributed equally}

series

• Series is for the abbreviation of the booktitle. It is optional, but if you add it, please without any year
  • e.g. sereis = {CHI}, NOT series = {CHI '22},.

Do NOT use

location

• Please do not use the location tag.

Adding new Members

Member information is stored in config.js

• Insert the new member in the correct position.
  • First, there are regular members with the order: Professors, then Postdoc, then Ph.D.s
  • Second, come associated members with the same order: Professors, then Postdoc, then Ph.D.s
  • Finally, there are alumni with the same order: Professors, then Postdoc, then Ph.D.s
    • Alumni roles are as they were while they last worked in the group.
  • Members of each category are sorted alphabetically by first name.
• Add as much information as possible. You can take a look at the other member pages for inspiration/ guidance.
• path may only contain ASCII characters
• role may only be one of professor, postdoc, phd, associatedpostdoc, associatedphd, alumnuspostdoc, alumnusphd
• Add a picture in assets/img/people/ (must be .jpg)
  • The name has to be <path>.jpg
  • The smaller thumbnail versions of images are generated automatically.

Compiling and Publishing

Without compiling, the live website will not update.

Compiling

Always run npm i to install or update packages (you need to have Node.js and npm installed).

Before compiling, make sure the local version of the repository is up to date (git pull).

npm start

• starts compiling the whole webpage
• Read the output of the script. Missing files and information will be printed there
• After compiling, you can inspect the local version by opening index.html in a browser. You will need to reload the page (e.g., press (CTRL) F5) in the browser to see changes!

npm start -- email

• compiles the webpage, but the information about missing files and information will be formatted as emails to copy and paste.

Compiling not working, weird output? Check if you have Microsoft HPC Pack installed, containing another node.exe

Publishing

If Git shows that files have changed, but without any actual changes, the problem is likely due to line endings. To fix this, please adjust your git settings as follows (-global is optional):

git config --global core.autocrlf input

Ask @ChristianKrauter to make you a contributor.

To publish changes, do a git commit and push, e.g., run

• git add .
• git commit -m "some useful commit message"
• git push

Repository Information

Structure

• assets/: all assets
  • img/: images
    • badges/: images for awards, etc.
    • misc/: logo, etc.
    • people/: member pictures
    • qr/: QR code PNGs for all publication pages
    • teaser/: publication teasers
    • **/small: thumbnails
  • pdf/: publication pdfs
  • suppl/: supplemental material
  • video/: videos
• members/: compiled member pages
• pub/: compiled publication pages
• scripts/: compile scripts
• aboutus.html: main page content
• bibliography_group.bib: publications
• bibliography_prior.bib: publications (before group association)
• config.js member information
• index.html: compiled main page
• package.json: npm specifications
• readme.md: this file
• style.css: page styles
• todo.md: open to-dos for the page

Dependency Update

• npm run upd
• npm i

Used Libraries

• bibtex for parsing bibtex (modified local version with a bug fix)
• bibtex-tidy for more beautiful bibtex
• image-js for image resizing for thumbnails (npm run resizePeople, npm run resizeThumbs)
• npm-check-updates for updating packages (npm run upd)
• qrcode to generate QR codes

Example Bibliography Entries

Conference paper:

@inproceedings{rau2025traversing,
    title           = {Traversing Dual Realities: Investigating Techniques for Transitioning 3D Objects between Desktop and Augmented Reality Environments},
    author          = {Tobias Rau, Tobias Isenberg, Andreas Köhn, Michael Sedlmair, Benjamin Lee},
    year            = {2025},
    month           = {04},
    booktitle       = {Conf. Human Factors in Computing Systems},
    publisher       = {ACM},
    address         = {New York, NY, USA},
    series          = {CHI},
    doi             = {https://doi.org/10.1145/3706598.3713949},
    note            = {Received a best paper award},
    badge           = {bestpaper},
    isbn            = {9798400713941},
    url             = {https://hal.science/hal-05050852},
    articleno       = {1236},
    numpages        = {16},
    video           = {https://www.youtube.com/embed/gknKEMn2Rv4?si=mVAY_XpgiNoG7PtZ},
    pdf             = {https://arxiv.org/abs/2504.00371},
    venue           = {CHI},
    abstract        = {Desktop environments can integrate augmented reality (AR) head-worn devices to support 3D representations, visualizations, and interactions in a novel yet familiar setting. As users navigate across the dual realities - desktop and AR - a way to move 3D objects between them is needed. We devise three baseline transition techniques based on common approaches in the literature and evaluate their usability and practicality in an initial user study (N=18). After refining both our transition techniques and the surrounding technical setup, we validate the applicability of the overall concept for real-world activities in an expert user study (N=6). In it, computational chemists followed their usual desktop workflows to build, manipulate, and analyze 3D molecular structures, but now aided with the addition of AR and our transition techniques. Based on our findings from both user studies, we provide lessons learned and takeaways for the design of 3D object transition techniques in desktop + AR environments.}
}

Journal article:

@article{rau2025maico,
    title           = {MAICO: A Visualization Design Study on AI-Assisted Music Composition},
    author          = {Simeon Rau, Frank Heyen, Benedikt Brachtel, Michael Sedlmair},
    year            = {2025},
    month           = {02},
    journal         = {IEEE Trans. Visualization Computer Graphics},
    pages           = {1--16},
    doi             = {https://doi.org/10.1109/TVCG.2025.3539779},
    url             = {https://www.replicabilitystamp.org/#https-github-com-visvar-maicov2},
    note            = {Received the Graphics Replicability Stamp},
    badge           = {reproducibility},
    suppl           = {https://github.com/visvar/MAICoV2},
    venue           = {TVCG},
    abstract        = {We contribute a design study on using visual analytics for AI-assisted music composition. The main result is the interface MAICO (Music AI Co-creativity), which allows composers and other music creators to interactively generate, explore, select, edit, and compare samples from generative music models. MAICO is based on the idea of visual parameter space analysis and supports the simultaneous analysis of hundreds of short samples of symbolic music from multiple models, displaying them in different metric- and similarity-based layouts. We developed and evaluated MAICO together with a professional composer who actively used it for five months to create, among other things, a composition for the Biennale Arte 2024 in Venice, which was recorded by the Munich Symphonic Orchestra. We discuss our design choices and lessons learned from this endeavor to support Human-AI co-creativity with visual analytics.}
}