Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Task Based UIs

Task Based UIs

PHP Benelux 2015 - Why do we organise our screens as grids, as if they were database tables? And why do we make forms that manipulate their records? Our user interfaces are very often based on the underlying database structure, while adding minimal value to the user’s workflow. A good user interface should not focus on data, grids or forms, but on the task at hand. It should show relevant state in order to make informed decisions. It should also guide the user to perform specific tasks. We will cover how we can make these tasks explicit in the user interface, but also how they can drive a whole architecture. In the end, a good user interface helps users achieve their goals.

Stijn Vannieuwenhuyse

January 23, 2015
Tweet

More Decks by Stijn Vannieuwenhuyse

Other Decks in Programming

Transcript

  1. $ git push origin master To https://github.com/stivni/doodis.git ! [rejected] master

    -> master (non-fast-forward) error: failed to push some refs to 'https://github.com/stivni/doodis.git' To prevent you from losing history, non-fast-forward updates were rejected Merge the remote changes (e.g. 'git pull') before pushing again. See the 'Note about fast-forwards' section of 'git push --help' for details.
  2. $customer->moveTo( new Address( $street, $number, $zip, $city, $country ) );

    $order->pay(Money::EUR(100)); $order->checkout();
  3. File a bug Acknowledge a bug Decline a bug Describe

    a bug Categorize a bug Close a bug
  4. class FileBug implements Command { private $id; private $description; public

    function __construct($id, $description) { //… } public function getId() { return $this->id; } public function getDescription() { return $this->description; } }
  5. class FileBugCommandHandler implements CommandHandler { private $bugRepository; public function __construct(BugRepository

    $bugRepository) { //… } public function handle(FileBug $command) { $this->bugRepository->add( new Bug( $command->getId(), $command->getDescription() ; } }
  6. class SimpleCommandDispatcher implements CommandDispatcher { /** @var CommandHandler[] */ private

    $commandHandlers; public function dispatch(Command $command) { $commandType = $this->getTypeFromCommand($command); $this->commandHandlers[$commandType]->handle($command); } public function registerHandler(CommandHandler $commandHandler) { $commandType = $this->getTypeFromCommandHandler($command); $this->commandHandlers[$commandClass] = $commandHandler; } //private function getTypeFromCommand(Command $command) //private function getTypeFromCommandHandler(CommandHandler $command) }
  7. class SimpleJsonCommandDeserializer implements CommandDeserializer { public function deserialize($data) { $reflectionClass

    = new ReflectionClass($data->commandName); return $reflectionClass->newInstanceArgs($data->payload); } }
  8. class CommandDispatcherController { // /api/command/dispatch public function deserialize($serializedCommand) { $command

    = $this->commandDeserializer->deserialize( $serializedCommand ); $commandDispatcher->dispatch($command); return new Response(“OK”, 200); } }
  9. [ { “bugId”: “1”, “description”: “Checkout fails with order >=

    100 EUR” “affectedFeature”: “CheckoutOrder”, “usageOfFeature”: “2233” }, … ]
  10. class BugStatistic implements JsonSerializable { private $bugId; private $description; private

    $affectedFeature; private $usageOfFeature; //public function __constructor(…) //public function jsonSerialize() }
  11. class BugStatisticsController { /** @var BugStatisticsRepository */ private $bugStatisticsRepository; //

    /api/bugs/statistics/overview public function overview() { $statistics = $this->bugStatisticsRepository->findAll(); return new Response(json_encode($statistics)); } }
  12. class QueryingBugStatisticsRepository implements BugStatisticsRepository { public function findAll() { $sql

    = ‘SELECT * FROM bugs JOIN usage ON bug.feature = usage.feature’; return array_map( function($record) { return new BugStatistic( $record->id, $record->description, $record->feature, $record->usage ); }, $this->fetchAll($sql) ); } }